天道酬勤,学无止境

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">&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>

It is work perfectly until I add the theme into my application.

This means that the modal window appear, but it is not active. the modal window appears behind the grey background. the modal window has not the focus. I can't close it too. But why?

评论

Bootstrap set the z-index for the following items in their variables file:

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

The z-index for items in bootswatch varables file is set as follows:

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

As you can see, the bootswatch modal is set on the same index as bootstrap's modal background. This conflict is causing issues. Setting the z-index for bootswatch's modal to 1050 will fix your issue, or adding an override to the .modal z-index in your site's stylesheet will help as well.

.modal {z-index: 1050;}

I had encountered the same problem. But then I noticed that I was using Bootstrap v3.3.2 and the version in Flatly css file was v3.3.4

So I updated the bootstrap.js file to the latest version (which is currently 3.3.4) and it worked.

Hope this helps.

Thanks to Steve! The exact override, that helped me (had same issue with Flatly):

.modal-dialog {
  z-index: 1050;}

Try like that :

<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
  • 单击主题的下拉菜单后如何动态更改主题(How to dynamically change themes after clicking a drop down menu of themes)
    问题 我正在将Bootstrap用于正在开发的网站的界面。 我还计划将bootswatch主题集成到我的网站。 我创建了一个包含bootswatch的不同主题的下拉菜单。 我的问题是,当我单击下拉菜单中的主题之一时如何切换主题? 回答1 小提琴: http : //jsfiddle.net/82AsF/(单击导航栏中的主题下拉菜单) 给您的链接一个类theme-link和主题名称的data-theme值,如下所示: <a href="#" data-theme="amelia" class="theme-link">Amelia</a> 然后,在全局变量中定义主题,如下所示: var themes = { "default": "//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css", "amelia" : "//bootswatch.com/amelia/bootstrap.min.css", "cerulean" : "//bootswatch.com/cerulean/bootstrap.min.css", "cosmo" : "//bootswatch.com/cosmo/bootstrap.min.css", "cyborg" : "//bootswatch.com/cyborg/bootstrap
  • 仅将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
  • 是否有一个包含所有 Bootstrap 元素的巨大“资产页面”可以重新设计样式? [关闭](Is there a giant 'asset page' of all Bootstrap elements that I can re-style? [closed])
    问题 关闭。 此问题不符合 Stack Overflow 准则。 它目前不接受答案。 想改善这个问题吗? 更新问题,使其成为 Stack Overflow 的主题。 3年前关闭。 改进这个问题 http://twitter.github.com/bootstrap/base-css.html 查看所有示例元素,如h1 、 h2 、 h3 、 inputs等? 我正在寻找一个简单的网页,其中包含每个 Bootstrap inputs/forms/elements/etc ,仅此而已。 然后我可以让我们的设计师用他自己的样式修改基本 CSS 文件,并且可以刷新资产页面以查看他的所有更改以及整个样式指南的形成情况。 这对我们的团队参考和我们的客户非常有帮助,因此他可以在一个合并的页面上看到我们的整个“外观和感觉”。 这样的页面存在于任何地方吗? 回答1 在撰写本文时,这是 BS3 http://bootply.com/render/71500 的好选择 2013 年 12 月更新:Bootswatch 有一个定期更新的页面 http://bootswatch.com/default/ 2018 年 3 月更新:Bootswatch 已针对 BS4 进行更新。 回答2 Bootstrap TLDR在一页中包含所有组件:https: //anvoz.github.io/bootstrap
  • 样式表不适用于Jekyll主题Freelancer引导程序(Stylesheets not working for Jekyll theme Freelancer bootstrap)
    问题 我已经有一个用于个人博客的username.github.io存储库,现在我的目标是使用我发现的完全不同的主题创建另一个github托管的jekyll页面。 这是我正在使用的主题的链接:https://github.com/jeromelachaud/freelancer-theme 因此,我在机器和github上创建了一个新的存储库,将本地存储库连接到远程github,创建了一个孤立的gh-pages分支,然后分叉了freelancer-theme并将其克隆到我创建的新存储库的文件夹中而在gh-pages分支上。 我使用一个命令将所有文件(我认为的 git init 除外)移动到新存储库的父文件夹中。 我删除了freelancer-theme分支文件夹,并使用gem install jekyll安装了Jekyll的最新版本。 然后,我运行jekyll服务,该网站在我的计算机上完美呈现。 进行了一些修改,但仍可以使用新的修改效果很好。 将这些更改推送到我在 github 上的存储库的 gh-pages 分支后,我现在转到 username.github.io/nameofmynewrepository 并获得一个包含主题所有组件的站点,但 css 似乎不起作用。 有谁从事过这个主题的工作,他们知道可能的原因吗? 文档非常稀疏。 这是我的github页面的网
  • 自定义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并在本地克隆。 他们正在迅速地改变库/框架
  • Shim Twitter Bootstrap for RequireJS(Shim Twitter Bootstrap for RequireJS)
    问题 RequireJS文档说,要支持IE的较早版本,您需要配置enforceDefine: true 。 因此,如果要支持Internet Explorer,捕获负载错误并通过直接define()调用或shim config获得模块化代码,请始终将forcedDefine设置为true。 有关示例,请参见下一部分。 注意:如果您确实设置了forceDefine:true,并且使用data-main =“”来加载主JS模块,则该主JS模块必须调用define()而不是require()来加载所需的代码。 JS主模块仍然可以调用require / requirejs来设置配置值,但是对于加载模块,它应该使用define()。 由于Twitter Bootstrap不是AMD模块,因此我需要对其进行填充以使其正常工作。 这就是我的配置方式; <script type="text/javascript"> var require = { paths: { "bootstrap": "../bootstrap", "jquery": "../jquery-1.8.2" }, shim: { "bootstrap": ["jquery"] }, enforceDefine: true }; </script> 稍后,当我的模块希望将引导程序作为依赖项时,我仍然会收到一条错误消息。 Error
  • 禁用引导模态区域之外的单击以关闭模态(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 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
  • How to recompiles .css files starting from bootswatch .less files?
    I succesfully installed node and less I downloaded from bootswatch the following two files from them 'Flatly': variable.less bootswatch.less Now I'd like simply create the final boostrap.css without do any modification, just to try if all is indetical to precooked bootstrap.css files from the same theme. I tried lessc variables.less > bootstrap.css But I got empty boostrap.css file I tried lessc bootswatch.less > bootstrap.css But I got NameError: variable @navbar-default-bg is undefined in C:\Users\\Downloads\ bootswatch.less on line 16, column 14: 15 background-color: #fff; 16 color: @navbar
  • 如何在twitter-bootstrap模态窗口中插入Django表单?(How do I insert a django form in twitter-bootstrap modal window?)
    问题 有人在四月份提出了完全相同的问题,但没有任何答案。 但是由于他提供的信息太少了; 这个问题被放弃了。 我也有同样的问题。 在main_page.html我有以下一行: <a href="/contact/edit/{{ item.id }}" title="Edit">edit</a> 一旦您单击此处,编辑模板将出现在Twitter引导程序模式内。 url.py (r'^contact/edit/(?P<contact_id>\d+)/$', contact_view), view.py def contact_view(request, contact_id=None): profile = request.user.get_profile() if contact_id is None: contact = Contact(company=profile.company) template_title = _(u'Add Contact') else: contact = get_object_or_404(profile.company.contact_set.all(), pk=contact_id) template_title = _(u'Edit Contact') if request.POST: if request.POST.get('cancel'
  • 当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
  • 考虑到升级到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
  • MVC引导主题(MVC Bootstrap Themes)
    问题 我想在我的MVC 5应用程序中包含对bootswatch主题的主题支持。 我希望用户主题在登录时被保存和加载。 我扩展了用户类别,使其包含主题,并且可以在编辑用户页面上成功设置和保存主题。 public class User : IdentityUser { public string BootstrapTheme {get;set;} } 在BootstrapTheme属性中,我将保存bootstrap css链接的href属性。 例如"~/Content/bootstrap.flatly.min.css" 计划是在布局页面中设置主题。 <link href="~/Content/bootstrap.spacelab.min.css" rel="stylesheet" /> 如何在不每次页面加载都查询数据库的情况下执行此操作? 能够执行类似<link href="@User.BootstrapTheme" rel="stylesheet" />将是理想的选择。 这是有关如何使用localstorage将其保存为一页的链接http://wdtz.org/bootswatch-theme-selector.html 回答1 您应该将主题名称/ URL存储为对用户的声明,而不是作为User类的一部分: await userManager.AddClaimAsync(user.Id
  • How do I insert a django form in twitter-bootstrap modal window?
    Someone has asked the exact same question in April, without any answer. But since he provided too little information; the question was abandoned. I have the same problem. Within a main_page.html I have this line: <a href="/contact/edit/{{ item.id }}" title="Edit">edit</a> Once you click there, the edit template shall appear inside a twitter bootstrap modal. url.py (r'^contact/edit/(?P<contact_id>\d+)/$', contact_view), view.py def contact_view(request, contact_id=None): profile = request.user.get_profile() if contact_id is None: contact = Contact(company=profile.company) template_title = _(u
  • 是否可以从侧面或底部制作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专家
  • 在 Angular 中将数据传递给 Twitter Bootstrap Modal(Passing Data to Twitter Bootstrap Modal in Angular)
    问题 我想显示一个模态框,询问用户是否要删除帖子。 我不知道如何传递我在 key 参数中传递的密钥,我也可以在其中发出警报。 我从 angular twitterbootstrap 站点获取了代码,但我想不出一种方法来传递数据以确认删除。 谢谢穆罕默德 $scope.deletePost = function(key, post, event) { alert(key); var modalInstance = $modal.open({ templateUrl: 'deletePost.html', controller: ModalInstanceCtrl, resolve: { items: function() { return $scope.posts; } }, }) modalInstance.result.then(function(selectedItem) { $scope.selected = selectedItem; alert(selectedItem); }); }; var ModalInstanceCtrl = function($scope, $modalInstance, items) { $scope.items = items; $scope.selected = { item: $scope.items[0] }; $scope.ok =
  • Twitter Bootstrap 3模态与淘汰赛(Twitter bootstrap 3 Modal with knockout)
    问题 我试图将Twitter Bootstrap模式与敲除功能完全绑定在一起。 通过完全绑定,我的意思是我希望与模态对话框的每次紧密交互都可以使用剔除。 我已经看到了一些问题,这些问题部分地将它们绑定在一起(例如,这个问题不允许使用esc)。 我正在使用几乎相同的绑定(实际上我在其他地方找到了) ko.bindingHandlers.modal = { init: function (element, valueAccessor) { $(element).modal({ show: false }); }, update: function (element, valueAccessor) { var value = valueAccessor(); if (ko.utils.unwrapObservable(value)) { $(element).modal('show'); } else { $(element).modal('hide'); } } } 但是问题是,并非所有事情都在我的小提琴中发挥作用。 如您所见,如果您使用“关闭”按钮关闭“模态”,则可以再次触发该模态。 但是,如果使用Esc键或单击背景或X按钮将其关闭,则无法再次打开Modal。 我知道问题是由于这样的事实,当我用其他方式关闭模态时(它不会改变可观察到的,因此当我第二次触发它时-没有任何改变)。
  • 将功能绑定到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 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)