Css 当模式激活时，如何阻止主窗口显示滚动条？_Css_Twitter Bootstrap_Twitter Bootstrap 3

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

css twitter-bootstrap twitter-bootstrap-3

Css 当模式激活时，如何阻止主窗口显示滚动条？,css,twitter-bootstrap,twitter-bootstrap-3,Css,Twitter Bootstrap,Twitter Bootstrap 3,我正在使用Bootstrap v3.0.1 当模式被激活时，我会看到一个滚动条。在某些情况下，它甚至会将内容移到左侧，完全破坏效果我试着设置主体，使其始终有一个滚动条，但我得到了两个这里有一个例子 .modal类具有以下CSS规则： .modal { position: fixed; top: 0px; right: 0px; bottom: 0px; left: 0px; z-index: 1040; display: none;

我正在使用Bootstrap v3.0.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>


.
.
.
.
.
.
.莫代尔{
溢出x：隐藏；
溢出y：隐藏；
}
.
.
.

.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>


.
.
.
.
.
.
.莫代尔{
溢出x：隐藏；
溢出y：隐藏；
}
.
.
.

谢谢ÖzkanÖZLÜ。我添加了“body.modal-open、.modal-open.navbar-fixed-top、.modal-open.navbar-fixed-bottom”，不是因为它修复了这个确切的示例，而是因为我解决了内容向左移动的问题。谢谢ÖzkanÖZLÜ。我添加了“body.modal-open、.modal-open.navbar-fixed-top、.modal-open.navbar-fixed-bottom”，不是因为它修复了这个确切的示例，而是因为我解决了内容向左移动的问题。