Twitter Bootstrap模式将html内容推向左侧

Question

如果我打开一个模态对话框,通过Twitter Bootstrap,我注意到它将页面的所有html内容(即,在container)中向左推了一点,然后在关闭之后将其恢复正常.但是,这仅在浏览器宽度足够大而不能在"移动"(即最小)媒体查询上时才会发生.最新版本的FF和Chrome(未测试其他浏览器)会出现这种情况.

你可以在这里看到问题:http://jsfiddle.net/jxX6A/2/

注意:您必须增加"结果"窗口的宽度,以便切换到"med"或"large"媒体查询css.

我根据Bootstrap网站上显示的示例设置了页面的HTML:

<div class='container'>
    <div class='page-header'>
        <h4>My Heading</h4>
    </div>
    <div id='content'>
        This is some content.
    </div>
    <div class='footer'>
        <p>&copy; 2013, me</p>
    </div>
</div>

我猜这不应该发生,但我不确定我做错了什么.

编辑:这是一个已知的错误,有关更多(和最新)的信息,请参阅:https://github.com/twbs/bootstrap/issues/9855

Answer 1

对于bootstrap 3.xx

我找到了一个解决方案,它可以使用100%的CSS而且没有JavaScript.

诀窍是,在html内容的滚动条上显示modal的滚动条.

CSS:

html {
  overflow: hidden;
  height: 100%;
}
body {
  overflow: auto;
  height: 100%;
}

/* unset bs3 setting */
.modal-open {
 overflow: auto; 
}

这是一个在线示例:http://jsbin.com/oHiPIJi/43/

我在Windows 7上测试它:

• FireFox 27.0
• Chrome 32.0.1700.107 m
• IE 11在浏览器模式8,9,10,Edge(桌面)
• IE 11在浏览器模式8,9,10,Edge(Windows Phone)

我可以在IE上找到一个新的小问题:

IE有背景(= body)滚动鼠标滚轮,如果没有更多的东西在前景滚动.

关心position:fixed!

由于此变通办法的性质,您需要额外注意固定元素.例如,"navbar fixed"的填充需要设置为(html而不是body如何在bootstrap doc中描述).

/* only for fixed navbar: 
* extra padding stetting not on "body" (like it is described in doc), 
* but on "html" element
* the used value depends on the height of your navbar
*/
html {
  padding-top: 50px;
  padding-bottom: 50px;
}

替代与包装

如果你不喜欢的设置overflow:hidden上html(有些人鸵鸟政策想这一点,但它的工作原理,是有效的,100%符合标准的),你可以用的内容body以额外股利.

比起你不需要额外注意固定元素,你可以像以前一样使用它.

body, html {
  height: 100%;
}
.bodywrapper {
  overflow: auto;
  height: 100%;
}

/* unset bs3 setting */
.modal-open {
 overflow: auto; 
}

/* extra stetting for fixed navbar, see bs3 doc
*/
body {
  padding-top: 50px;
  padding-bottom: 50px;
}

这是一个例子:http://jsbin.com/oHiPIJi/47/

更新:

Bootstrap中的问题:

• #12627
• #9855

更新2:仅供参考

在Bootstrap 3.2.0中,他们添加了一个解决方法modal.js,尝试使用Javascript处理每个调用的问题modal.prototype.show(),Modal.prototype.hide()和Modal.prototype.resize().他们为此添加了7个(!)新方法.现在约 20%的代码modal.js只是试图处理这个问题.

Answer 2

试试这个:

body.modal-open {
    overflow: auto;
}
body.modal-open[style] {
    padding-right: 0px !important;
}

.modal::-webkit-scrollbar {
    width: 0 !important; /*removes the scrollbar but still scrollable*/
    /* reference: http://stackoverflow.com/a/26500272/2259400 */
}

Answer 3

它实际上是由bootstrap.css中的以下规则引起的:

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

我不确定为什么它的行为(可能以某种方式考虑滚动条)但你可以改变这种行为:

body.modal-open {margin-right: 0px}

编辑:实际上,这是bootstrap中报告的问题:https://github.com/twbs/bootstrap/issues/9855

Answer 4

当模型打开时,身体右侧有一个17px的填充.下面的代码应解决该问题.

body {
padding-right: 0px !important;
}