Question

我正在使用Bootstrap v3.0.1

当激活模态时，我会出现一个滚动条。在某些情况下，它甚至会将内容转移到左侧，完全破坏了效果。

我已经尝试设置主体，以便它总是有一个滚动条，但后来我得到了两个。

这是一个例子。

http://nu11.co.uk/modal.html

Answer 1

.modal类具有以下CSS规则：

.modal {
    position: fixed;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    z-index: 1040;
    display: none;
    overflow-x: auto;
    overflow-y: scroll;
 }

滚动条是因为overflow-x和overflow-y行。

假设您从CDN调用bootstrap.css，如果您在链接bootsrap.css后在页面的head标签中破解此规则，滚动条将消失：

<head>
    .
    .
    .
    <link href="/dist/css/bootstrap.css" rel="stylesheet">
    .
    .
    .
    <style>
        .modal {
            overflow-x: hidden;
            overflow-y: hidden;
        }
    </style>
    .
    .
    .
</head>

当激活模态时，如何阻止主窗口显示滚动条？

1 个答案: