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;
}

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

Working Example

<强>更新

实际上很容易。只需添加：

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

到你的CSS。

它使用vh和calc，这也恰好具有良好的浏览器支持（IE9 +）。

这是基于此answer。请在那里阅读更多详细信息，我不会复制他的答案。

Working Example

Answer 2

如果你有动态内容，这可能会很痛苦。我使用它来确保它具有正确的高度然后它会滚动：

$('#modal').on('shown.bs.modal', function () {
  $('.modal-dialog').css('height', $('.modal-dialog').height() );
});

$('#modal').on('hidden.bs.modal', function () {
  $('.modal-dialog').css('height', 'auto');
});

Answer 3

您似乎在描述https://github.com/twbs/bootstrap/issues/14916（“模态覆盖在滚动条上方”），这将由https://github.com/twbs/bootstrap/pull/14927（“修复模态背景覆盖模态的滚动条”）在Bootstrap v3.3.1中修复。

Twitter Bootstrap 3 Modal with Scrollable Body

3 个答案: