强制 Twitter Bootstrap 3 模式不隐藏垂直滚动条

Question

垂直滚动条被隐藏，当 Twitter Bootstrap 3 模态出现时，returns，当模态被隐藏时。由于我页面上的某些元素根据垂直滚动条是否可见而改变其位置 - 这会产生整体不好看的效果：

有什么方法可以防止这种情况发生并强制垂直滚动条始终停留在屏幕上，即使在显示 Twitter Bootstrap 3 模态期间也是如此？

我正在使用模式 generated by Yii2 framework，但我怀疑这是框架问题。似乎更像是核心 Twitter Bootstrap 3 个问题。

Answer 1

在您的自定义 CSS 文件中，应在 bootstrap CSS 之后加载，添加以下代码：

.modal-open {
    overflow: scroll;
}

Answer 2

正如您所说，Bootstrap 默认代码有特定的预设 CSS，在这种情况下将对模态的外观进行 overflow: hidden。

要解决此问题，请使用选择器定位模式并向其添加 overflow: scroll，并确保它位于 Bootstrap CSS 之后以获得优先级。

如果您的 CSS 出于某种原因需要排在 Bootstrap CSS 之前，您也可以在上面打一个 !important 标签。

希望对您有所帮助。