Twitter Bootstrap 3 Modal with Scrollable Body

Question

我正在从Bootstrap 2转移到Bootstrap 3.在旧版本中,我使用的是具有长内容的模态,并且当达到给定的最大高度时,模态会自动滚动.

在Bootstrap 3中,模式只是扩展以显示整个内容,我必须使用向下翻页键实际到达它的末尾并查看模态页脚中的按钮.我无法使用浏览器窗口最右侧的滚动条,因为它被背景覆盖,并且在任何情况下都不能直观地滚动模式框中的内容.

如何在bootstrap 3中实现一个模态,在达到最大高度时自动插入滚动条滚动内容？

我尝试将max height设置为模态类,如下所示:

.modal{
   max-height:80%;
}
.modal-header{
   height:15% !important;    
}
.modal-body{
   height:70%;
   overflow:auto;
}
.modal-footer{
   height:15%;
}

但它没有按预期工作.模态窗口确实达到了最大尺寸,但它只是在那里削减了内容,甚至没有显示页脚.

谢谢你的帮助.

Answer 1

只需添加:

.modal-content {
  height:250px;
  overflow:auto;
}

高度当然可以根据您的个人需求进行调整.

工作实例

更新:

这实际上非常简单.只需添加:

.modal-body {
    max-height: calc(100vh - 212px);
    overflow-y: auto;
}

对你的CSS.

它使用vh和calc,它也恰好具有良好的浏览器支持(IE9 +).

这是基于这个答案.请在那里阅读更多详细信息,我不会复制他的答案.

工作实例