天道酬勤,学无止境

twitter bootstrap 3 和 bootswatch flatly 模板 - 模态不再工作(twitter bootstrap 3 and bootswatch flatly template - modal not working anylonger)

问题

在我从 bootswatch (https://bootswatch.com/flatly/) 安装 flatly 模板后,twbs 的正常模式窗口不再工作。

<a data-toggle="modal" href="#" data-target="#myModal">CLICK!</a>
.
.
        <!-- Modal -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
              </div>
              <div class="modal-body">
                ...
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
              </div>
            </div>
          </div>
        </div>

    </body>
</html>

在我将主题添加到我的应用程序之前,它是完美的。

这意味着模态窗口出现,但它不是活动的。 模态窗口出现在灰色背景后面。 模态窗口没有焦点。 我也关不掉但为什么?

回答1

Bootstrap 在其变量文件中为以下项目设置 z-index:

@zindex-navbar:            1000;
@zindex-dropdown:          1000;
@zindex-popover:           1060;
@zindex-tooltip:           1070;
@zindex-navbar-fixed:      1030;
@zindex-modal-background:  1040;
@zindex-modal:             1050;

bootswatch 变量文件中项目的 z-index 设置如下:

@zindex-navbar:            1000;
@zindex-dropdown:          1000;
@zindex-popover:           1060;
@zindex-tooltip:           1070;
@zindex-navbar-fixed:      1030;
@zindex-modal:             1040;

如您所见,bootswatch 模态设置在与 bootstrap 模态背景相同的索引上。 这种冲突正在引起问题。 将 bootswatch 模态的 z-index 设置为 1050 将解决您的问题,或者在您网站的样式表中添加覆盖 .modal z-index 也会有所帮助。

.modal {z-index: 1050;}
回答2

我遇到了同样的问题。 但是后来我注意到我使用的是 Bootstrap v3.3.2并且Flatly css 文件中的版本是v3.3.4

所以我将 bootstrap.js 文件更新到最新版本(目前是3.3.4 )并且它起作用了。

希望这可以帮助。

回答3

感谢史蒂夫! 确切的覆盖,这对我有帮助(与 Flatly 有同样的问题):

.modal-dialog {
  z-index: 1050;}
回答4

像这样尝试:

<div class="modal">
    <div class="modal-dialog">
        <div class="modal-content">
             <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                   <h4 class="modal-title">Modal title</h4>
             </div>
             <div class="modal-body">
                 ...
             </div>
             <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                  <button type="button" class="btn btn-primary">Save changes</button>
             </div>
       </div>
    </div>
</div>

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • 如何在MVC 5项目中从bootswatch或wrapbootstrap实现主题?(How can I implement a theme from bootswatch or wrapbootstrap in an MVC 5 project?)
    问题 我将要创建一个新的ASP.Net MVC5 Web应用程序。 我想在应用程序中使用bootswatch或wrapbootstrap中的主题,但是找不到有关如何执行操作的指令集。 回答1 应用主题的步骤非常简单。 要真正了解所有功能如何协同工作,您需要了解ASP.NET MVC 5模板提供的即用型功能以及如何根据需要自定义它。 注意:如果您对MVC 5模板的工作原理有基本的了解,请向下滚动到主题部分。 ASP.NET MVC 5模板:工作原理 本演练介绍了如何创建MVC 5项目以及幕后情况。 在此博客中查看MVC 5模板的所有功能。 创建一个新项目。 在“模板”下,选择“ Web” >“ ASP.NET Web应用程序” 。 输入项目的名称,然后单击“确定” 。 在下一个向导中,选择“ MVC” ,然后单击“确定” 。 这将应用MVC 5模板。 MVC 5模板创建一个使用Bootstrap提供响应式设计和主题化功能的MVC应用程序。 该模板在内部包含一个bootstrap 3. * nuget软件包,该软件包安装4个文件: bootstrap.css , bootstrap.min.css , bootstrap.js和bootstrap.min.js 。 通过使用Web优化功能,Bootstrap捆绑在您的应用程序中。 检查Views/Shared/_Layout
  • twitter bootstrap 3 and bootswatch flatly template - modal not working anylonger
    After I had install the flatly template from bootswatch (https://bootswatch.com/flatly/) the normal modal window of twbs is not working anylonger. <a data-toggle="modal" href="#" data-target="#myModal">CLICK!</a> . . <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Modal
  • Twitter引导模态背景不会消失(Twitter bootstrap modal-backdrop doesn't disappear)
    问题 我正在使用Twitter bootstrap Modal对话框。 当我单击引导模式对话框的提交按钮时,它将发送一个AJAX请求。 我的问题是模态背景不会消失。 “模态”对话框确实正确消失,但是保留了“模态背景”,该模态在屏幕上造成不透明 我能做些什么? 回答1 确保在执行AJAX请求时没有替换包含实际模态窗口的容器,因为在尝试关闭它时,Bootstrap将无法找到对其的引用。 在您的Ajax完整处理程序中,删除模态,然后替换数据。 如果这样不起作用,您可以通过执行以下操作始终强制其消失: $('#your-modal-id').modal('hide'); $('body').removeClass('modal-open'); $('.modal-backdrop').remove(); 回答2 确保您对$.modal()首次调用以应用模态行为不会传递比您预期的更多的元素。 如果发生这种情况,将最终为集合中的EACH元素创建一个模态实例,并带有background元素。 因此,当您实际上正在查看重复项之一时,看起来好像已经留下了背景。 就我而言,我试图使用以下代码即时创建模式内容: myModal = $('<div class="modal">...lots of HTML content here...</div><!-- end modal -->'); $(
  • 自定义Bootstrap CSS模板(Customizing Bootstrap CSS template)
    问题 我刚刚开始使用Twitter的Bootstrap,并且想知道定制的“最佳实践”是什么。 我想开发一种系统,该系统将利用css模板(Bootstrap或其他)的所有功能,完全(轻松)可修改,具有可持续性(即–从Twitter发布下一版Bootstrap时,我不会)不必重新开始。 例如,我想将背景图像添加到顶部导航中。 看来有3种方法可以解决此问题: 修改bootstrap.css中的.topbar类。 我不是特别喜欢这个,因为我会有很多.topbar项,并且我不一定要用相同的方式进行修改。 用我的背景图像创建新类,然后应用两种样式(新样式和引导样式应用于我的元素)。 这可能会产生样式冲突,可以通过将.topbar类剥离到单独的类中,然后仅使用未由我的自定义类踩下的片段来避免。 再次,这需要比我认为必要的工作更多的工作,并且尽管它很灵活,但是它不允许我在Twitter发布下一部分时轻松更新bootstrap.css。 使用.LESS中的变量来实现自定义。 副手这似乎是一个不错的方法,但是没有使用过。除非我担心在客户端上编译css和代码的可持续性。 尽管我使用的是Bootstrap,但是这个问题可以推广到任何CSS模板。 在此先感谢您的输入。 回答1 最好的办法是。 1.从github派生twitter-bootstrap并在本地克隆。 他们正在迅速地改变库/框架
  • 考虑到升级到v3编写Twitter的Bootstrap(Writing Twitter's Bootstrap with upgrading to v3 in mind)
    问题 如果您想使升级路径尽可能轻松,您将如何使用引导程序2.3.2编写新应用程序? 例如,我知道span-和col-类将消失,因此我将为每个具有该定义的mixin的类创建一个更少的自定义类,或者以我的模板语言创建一个宏以输出类名而不是直接使用它。 另外,是否有bootstrap 3迁移指南? 我找不到一个。 那么,您将采取哪些步骤来简化升级? 回答1 Bootstrap 3尚未正式发布,但是您可以从https://github.com/twitter/bootstrap/archive/3.0.0-wip.zip下载最新代码。 您还可以编译文档以检查是否存在差异,请参阅:编译Twitter bootstrap 3文档(如何操作)?。 Bootstrap 3 RC1现在已经发布。 Twitter的Bootstrap 3将不会与版本2向后兼容,因此在某种程度上迁移总是很麻烦的。 Twitter的Bootstrap 3将具有流畅的网格(默认情况下),因此也将有助于以流畅的布局来构建版本2模板。 其他重要的变化是: TB3将首先移动不支持IE7和Firefox 3.x 没有单独的响应式CSS文件。 另请阅读:http://bassjobsen.weblogs.fm/migrate-your-templates-from-twitter-bootstrap-2-x-to-twitter
  • Twitter Bootstrap定制最佳实践(Twitter Bootstrap Customization Best Practices [closed])
    问题 关门了。 这个问题是基于意见的。 它当前不接受答案。 想要改善这个问题吗? 更新问题,以便通过编辑此帖子以事实和引用的形式回答。 7年前关闭。 改善这个问题 我正在使用LESS使用Bootstrap 2.0.3。 我想对其进行广泛的自定义,但是我希望避免在任何可能的情况下都对源进行更改,因为对库的更改非常频繁。 我是LESS的新手,所以我不知道它的编译完全如何。 使用LESS或基于LESS的框架有哪些最佳实践? 回答1 我的解决方案与jstam相似,但是在可能的情况下,我避免对源文件进行更改。 鉴于引导程序的更改将很频繁,因此我希望能够通过将我的修改保存在单独的文件中来获取最新的源代码并进行最小的更改。 当然,这并不是完全防弹的方法。 将bootstrap.less和variables.less复制到父目录。 将bootstrap.less重命名为theme.less或任何您想要的名称。 您的目录目录结构应如下所示: /Website theme.less variables.less /Bootstrap ... 更新theme.less中的所有引用以指向bootstrap子目录。 确保从父目录而不是从引导目录引用您的variables.less,如下所示: ... // CSS Reset @import "bootstrap/reset.less"; // Core
  • Twitter Bootstrap模态块文本输入字段(Twitter Bootstrap modal blocks text input field)
    问题 我正在尝试使用模式作为弹出帮助窗口。 我将背景设置为“无”。 当模式打开(无背景)时,“原始”页面中的输入字段无法聚焦。 其他输入类型(示例中的复选框和按钮)效果很好... 任何想法 ? 我的代码: <div class="container"> <!-- Button to trigger modal --> <form> <label>Input</label> <input type="text" placeholder="Type something…"> <label class="checkbox"> <input type="checkbox">Checkbox </label> <button type="submit" class="btn">Submit</button> </form> <!-- Button to trigger modal --> <a href="#myModal" role="button" class="btn" data-toggle="modal">Open Help...</a> <!-- Modal --> <div id="myModal" class="modal hide" data-backdrop="" tabindex="-1" role="dialog" aria-labelledby=
  • 仅将CSS样式应用于某些元素(Applying CSS styles only to certain elements)
    问题 我有一个现有的网站,上面有很多用表格布置的旧页面和表格,我正尝试逐步过渡到CSS。 我想使用Twitter Bootstrap样式表-尤其是表单样式-但仅在我明确要求它们的页面部分中使用。 例如,我可能将整个表单围绕在div中,如下所示: <div class="bootstrap"> <!-- everything in here should have the Bootstrap CSS applied --> <form> <p><label for="text_input">Label</label><input type="text" id="text_input" /></p> </form> </div> 我希望所有其他形式保持与现在相同,因为我将无法同时更改所有形式。 有没有简单的方法可以做到这一点? 我可以遍历Bootstrap CSS中的每个样式,并添加一个父选择器(例如'p'将成为'div.bootstrap p'),但这会花费很长时间,并且容易遗漏样式。 编辑:如果不可能,是否有免费的工具可以从文件中提取所有样式,添加前缀,然后再次保存? 回答1 对于Bootstrap 3,如果您less使用它,会更容易: 下载Bootstrap源代码并制作一个style.less文件,如下所示: .bootstrap { @import "/path-to
  • 当Twitter Bootstrap模态窗口包含Rails表单帮助程序时显示错误(Displaying errors when a Twitter Bootstrap modal window contains a Rails form helper [closed])
    问题 这个问题不太可能对将来的访客有所帮助; 它仅与较小的地理区域,特定的时间段或极为狭窄的情况(通常不适用于Internet的全球受众)有关。 要获得使该问题更广泛适用的帮助,请访问帮助中心。 8年前关闭。 我要问的是将Twitter Bootstrap模态窗口与Rails表单帮助程序一起使用,并显示表单验证错误消息。 我正在使用带有Rails 3.2的Twitter Bootstrap 2.0。 我在Twitter Bootstrap模态窗口中有一个表单。 页面上有一个按钮可以打开模式窗口并显示表单。 一切都很好,除非表单提交有错误,否则将显示页面,并且错误消息也不会显示,因为表单位于(最初未显示的)模式窗口内。 我需要使用jQuery来测试表单是否包含Rails错误消息并覆盖“ display:none;”。 呈现页面时的样式(或切换模式窗口以显示)。 我尝试将以下代码添加到我的asset / javascripts / application.js文件中,但是它不起作用: $('document').ready(function() { if ($('#error_explanation').length > 0) { $("#request_invite").css("display", "block"); } }) 并且: $('document').ready
  • 带有可滚动体的 Twitter Bootstrap 3 Modal(Twitter Bootstrap 3 Modal with Scrollable Body)
    问题 我正在从 Bootstrap 2 转移到 Bootstrap 3。在旧版本中,我使用的是内容很长的模态,当达到给定的最大高度时,模态会自动滚动。 在 Bootstrap 3 中,模态只是扩展以显示整个内容,我必须使用向下翻页键才能真正到达它的末尾并查看模态页脚中的按钮。 我无法使用浏览器窗口最右侧的滚动条,因为它被背景覆盖,无论如何,仅滚动模式框中的内容是不直观的。 如何在 bootstrap 3 中实现一个模式,当达到最大高度时自动插入滚动条来滚动内容? 我尝试将最大高度设置为模态类,如下所示: .modal{ max-height:80%; } .modal-header{ height:15% !important; } .modal-body{ height:70%; overflow:auto; } .modal-footer{ height:15%; } 但它没有按预期工作。 模态窗口确实达到了最大尺寸,但它只是在那里剪切了它的内容,甚至不显示页脚。 谢谢你的帮助。 回答1 只需添加: .modal-content { height:250px; overflow:auto; } 高度当然可以根据您的个人需求进行调整。 工作示例 更新: 这实际上很容易。 只需添加: .modal-body { max-height: calc(100vh - 212px)
  • 是否可以从侧面或底部制作Twitter Bootstrap模态幻灯片,而不是向下滑动?(Is it possible to make a Twitter Bootstrap modal slide from the side or bottom instead of sliding down?)
    问题 当前,模态下滑效果是通过将fade类添加到模态div来完成的。 是否可以通过更改CSS将效果从侧面(或从底部)更改为滑动? 我在网上找不到有关如何执行此操作的任何信息,并且我也不知道有足够的CSS可以自己执行此操作。 的HTML: <div id='test-modal' class='modal fade hide'> <div>Stuff</div> </div> 回答1 Bootstrap 3现在使用CSS转换translation3d而不是CSS过渡,从而可以利用GPU硬件加速来获得更好的动画效果。 它使用以下CSS(无缓冲) .modal.fade .modal-dialog { -webkit-transform: translate3d(0, -25%, 0); transform: translate3d(0, -25%, 0); } 这是CSS,您可以使用它从左侧滑动 .modal.fade:not(.in) .modal-dialog { -webkit-transform: translate3d(-25%, 0, 0); transform: translate3d(-25%, 0, 0); } 注意否定选择器。 我注意到这对于防止“ .modal.in .modal-dialog”定义的干扰是必要的。 注意:我不是CSS专家
  • 如何在 Twitter Bootstrap 中同时打开两个模态对话框(How to open two modal dialogs in Twitter Bootstrap at the same time)
    问题 我已经在我的项目中实现了引导对话框。 我在该对话框中有一些删除功能,删除确认消息会打开另一个引导程序对话框。 但是当第二个确认对话框打开时,第一个对话框不会被禁用并且所有事件都有效。 当另一个对话框打开时,是否有任何解决方案可以禁用原始对话框? 这是我的代码: function OpenDialogForSelectionAdmItem(title, content, callback) { var dlg = new BootstrapDialog({ title: title, content: content, buttons: [{ label: 'Save', cssClass: 'btn-primary', id: 'btnSave', onclick: function (dialog) { } }, { label: 'Close', cssClass: 'btn', id: 'btnClose', onclick: function (dialog) { if (callback != "") { callback(true); } dialog.close(); } }] }); dlg.open();` } 截屏: 当删除确认对话框打开时,我想禁用第一个对话框。 回答1 问题: 为了理解 Web 开发中模态对话框的复杂性,您需要更多地了解 z-index
  • 更改Twitter Bootstrap模态中的背景颜色?(Change the background color in a twitter bootstrap modal?)
    问题 在Twitter引导程序中创建模态时,是否可以更改背景颜色? 完全删除阴影? 注意:对于删除阴影,此操作不起作用,因为它还会更改单击行为。 (我仍然希望能够在模态外部单击以将其关闭。) $("#myModal").modal({ backdrop: false }); 回答1 通过以下方法更改颜色: 的CSS 将这些样式放在引导样式之后的样式表中: .modal-backdrop { background-color: red; } 较少的 将引导变量更改为: @modal-backdrop-bg: red; 资源 萨斯 将引导变量更改为: $modal-backdrop-bg: red; 资源 引导程序定制器 将@modal-backdrop-bg更改为所需的颜色: getbootstrap.com/customize/ 您也可以通过Javascript或将颜色设置为transparent来删除背景。 回答2 如果要为特定模式更改背景的背景颜色,则可以通过以下方式访问background元素: $('#myModal').data('bs.modal').$backdrop 然后,您可以通过.css jquery函数更改任何CSS属性。 特别是具有背景: $('#myModal').data('bs.modal').$backdrop.css('background
  • 将功能绑定到Twitter Bootstrap Modal关闭(Bind a function to Twitter Bootstrap Modal Close)
    问题 我在一个新项目上使用Twitter Bootstrap lib,我希望页面的一部分刷新并检索模态关闭时的最新json数据。 我看不到文档中的任何地方,有人可以向我指出或提出解决方案。 使用记录方法的两个问题 $('#my-modal').bind('hide', function () { // do something ... }); 我已经在模式上附加了“隐藏”类,因此它不会在页面加载时显示,因此会加载两次 即使我删除了hide类并将元素ID设置为display:none并添加console.log("THE MODAL CLOSED"); 当我点击关闭时,对上面的功能没有任何反应。 回答1 Bootstrap 3和4 $('#myModal').on('hidden.bs.modal', function () { // do something… }); 引导程序3:getbootstrap.com/javascript/#modals-events 引导程序4:getbootstrap.com/docs/4.1/components/modal/#events 引导程序2.3.2 $('#myModal').on('hidden', function () { // do something… }); 请参阅getbootstrap.com/2.3.2
  • Twitter Bootstrap模态中的自动对焦输入(Autofocus input in twitter bootstrap modal)
    问题 我有这样的问题-我需要在twitter bootstrap modal内自动聚焦一些元素(显示之后)。 棘手的部分在这里-使用'data-remote'(jQuery.load方法)从单独的HTML文件中加载此模式的内容,因此 $(document).on('shown', ".modal", function() { $('[autofocus]', this).focus(); }); 仅在之前加载了模态时有效。 问题是-如何使自动对焦在模态负载首次出现时起作用? 回答1 我正在使用Bootstrap 3.0(希望它也适用于3.1)。 我们必须使用tabindex="-1"因为它允许ESC键关闭模式。 因此,我能够使用以下方法解决此问题: // Every time a modal is shown, if it has an autofocus element, focus on it. $('.modal').on('shown.bs.modal', function() { $(this).find('[autofocus]').focus(); }); 回答2 尝试删除tabindex =“-1”,它可以正常工作。 <div class="modal fade" id="modalID" tabindex="-1" role="dialog" aria
  • 禁用引导模态区域之外的单击以关闭模态(Disable click outside of bootstrap modal area to close modal)
    问题 我正在制作一个Bootstrap网站,其中包含几个Bootstrap'Modals'。 我正在尝试自定义一些默认功能。 问题是这样; 您可以通过单击背景关闭模态。 反正有禁用此功能? 仅在特定模态上? 引导程序模式页面 回答1 在“选项”一章的链接页面中,您可以看到backdrop选项。 将此选项的值设置为'static'将防止关闭模态。 正如@PedroVagner在评论中指出的那样,您还可以通过按Esc来传递{keyboard: false}以防止关闭模式。 如果您通过js打开模式,请使用: $('#myModal').modal({backdrop: 'static', keyboard: false}) 如果使用数据属性,请使用: <button data-target="#myModal" data-toggle="modal" data-backdrop="static" data-keyboard="false"> Launch demo modal </button>` 回答2 这是最简单的一个 您可以定义模态行为,定义数据键盘和数据背景。 <div id="modal" class="modal hide fade in" data-keyboard="false" data-backdrop="static"> 回答3 您可以使用如下属性: data
  • Twitter Bootstrap - 为什么我的模态像背景一样褪色?(Twitter Bootstrap - why is my modal as faded as the background?)
    问题 所以我使用 Twitter Bootstrap 并且当用户单击“注册”按钮时我有一个向下滑动的模式。 唯一的问题是,不仅背景页面褪色,这是一个不错的效果,而且模态也褪色了。 如何在背景褪色时使模态亮度正常? 我在这里创建了一个 JSFiddle 来演示我的问题:http://jsfiddle.net/jononomo/7z8RZ/7/ 以下代码创建了一个褪色的模态: <div class="navbar navbar-fixed-top"> <a href="#registration_modal" data-toggle="modal"> Register </a> <div id="registration_modal" class="modal hide fade"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h3 id="myModalLabel">Register An Account</h3> </div> <div class="modal-body"> Registration form goes here. </div> <div class="modal-footer"> <button class="btn
  • 在 twitter-bootstrap 中居中模式(Centering modal in twitter-bootstrap)
    问题 我无法在各种大小的 twitter-bootstrap 中居中我的模态。 你可以在这里和这里看到现场示例。 (只需点击图片或“举报此图片”)。 你会看到模态在那里像魅力一样工作,但它不是水平居中。 我尝试了所有方法:边距、浮动、文本对齐甚至<center> .modal: .modal { position: fixed; top: 10%; z-index: 1050; width: auto; background-color: #ffffff; border: 1px solid #999; border: 1px solid rgba(0, 0, 0, 0.3); *border: 1px solid #999; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; outline: none; -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); -webkit-background-clip: padding-box; -moz-background
  • Twitter Bootstrap 模态宽度问题(Twitter Bootstrap Modal Width issues)
    问题 我的应用程序具有许多模式,所有模式都具有不同的宽度。 我知道您可以通过执行以下操作来设置模态内联的宽度: 宽度:400px margin-left:-200px; 这很好用,但是如果你压缩你的窗口,它会踢出屏幕的 50% 的模态,所以你看不到模态的一半,在这些小分辨率下它是无用的。 在 iPad 的分辨率下,您可以看到这种情况发生。 现在讨论这个问题,如果在主 bootstrap.css 文件中设置了模态的宽度,那么只有一个宽度才完美。 因此,如果我将宽度设置为 400 和 margin-left -200,则所有模式都将在此宽度下工作。 但是,如果我继续在模态上执行内联 CSS 并执行例如: 宽度:900px 左边距:-450px 如上所述,它会在较低的分辨率下中断。 我究竟做错了什么? Twitter Bootstrap 是否只提供使一种模式宽度在所有分辨率下都能工作的能力? 我会包括截图,但是 StackOverflow 的管理员显然不允许我发布这些来帮助你们。 这是一个模态之一的示例,由于执行宽度内联,它会在较低的分辨率下中断: <div id="add-edit-project-modal" class="modal hide fade" style="width: 320px; margin-left: -160px;"> <div class="add-edit
  • 如何根据内容动态调整Twitter Bootstrap模式的大小(How to resize Twitter Bootstrap modal dynamically based on the content)
    问题 我的数据库内容具有不同类型的数据,例如Youtube视频,Vimeo视频,文本,Imgur图片等。它们的高度和宽度都不同。 我在搜索Internet时发现的所有内容都将大小更改为仅一个参数。 它必须与弹出窗口中的内容相同。 这是我的HTML代码。 我还使用Ajax来调用内容。 <div id="modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 id="ModalLabel"></h3> </div> <div class="modal-body"> </div> </div> 回答1 由于您的内容必须是动态的,因此可以在模态的show事件上动态设置模态的css属性,这将调整模态的大小,从而覆盖其默认规格。 被引导的原因是使用css规则将最大高度应用于模态主体,如下所示: .modal-body { position: relative; overflow-y: auto