html - 在 Bootstrap 3.0 模态中，滚动条被禁用但它仍然占用空间

Question

这个问题与此有关：-

为什么这个 Bootstrap 3.0 模态演示中会出现第二个垂直滚动条？

行。我已经覆盖了.modal班级overflow-y规则：-

.modal {
    overflow-y: auto !important;
}

但是现在当模式打开时，我看不到滚动条。没关系。这就是我所要求的。但是，它仍然会占用空间，并且每当模式打开时页面都会向左移动。

截屏：-

有什么解决办法吗？

Answer 1

罪魁祸首被抓。Bootstrap 向 body 和其他区域添加了一个类，其名称和规则如下：-

body.modal-open, .modal-open .navbar-fixed-top, .modal-open .navbar-fixed-bottom {
     margin-right:15px;
}

也如下覆盖这个类，就可以了。

body.modal-open, .modal-open .navbar-fixed-top, .modal-open .navbar-fixed-bottom {
     margin-right:0px;
}

Answer 2

而不是auto给hidden。

.modal {
    overflow-y: hidden;
}

它对我有用。

Answer 3

发生这种情况是因为在打开模态之后，模态正在将类“modal-open”添加到正文标记。

解决这个问题

您可以按如下方式覆盖 CSS

body.modal-open { overflow-y: auto; }

但您仍然会在旁边看到另一个禁用滚动条。解决这个问题

你可以覆盖如下

.modal{ overflow-y: auto; }