Twitter Bootstrap modal 将 html 内容推送到左侧 [英] Twitter Bootstrap modal pushes html content to the left

问题描述

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

If I open a modal dialog, through Twitter Bootstrap, I've noticed that it pushes all the html content of the page (i.e., in the container) to the left a little bit, and then puts it back to normal after closing itself. However, this only happens if the browser width is large enough to not be on the "mobile" (i.e., smallest) media query. This occurs with the latest versions of FF and Chrome (haven't tested other browsers).

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

You can see the problem here: http://jsfiddle.net/jxX6A/2/

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

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

I have setup the HTML of the page based upon the examples shown on Bootstrap's site:

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

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

I'm guessing this is not supposed to happen, but I'm not sure what I've done wrong.

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

This is a known bug, for more (and up-to-date) information, please see: https://github.com/twbs/bootstrap/issues/9855

推荐答案

对于 bootstrap 3.x.x.

For bootstrap 3.x.x.

我找到了一个解决方案，它适用于 100% CSS 而无需 JavaScript.

I have found a solution, that works with 100% CSS and no JavaScript.

诀窍是在 html 内容的滚动条上显示模态滚动条.

The trick is to show the scrollbar for modal over the scrollbar of html content.

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 上对其进行了测试:

I tested it on Windows 7 with:

• 火狐 27.0
• 铬 32.0.1700.107 米
• IE 11 浏览器模式 8、9、10、Edge(桌面)
• IE 11 浏览器模式 8、9、10、Edge(Windows 手机)

我在 IE 中发现的一个新小问题:

One new little issue I found with IE:

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

IE has background (=body) scrolling with mouse wheel, if there is nothing more to scroll in the foreground.

小心position:fixed！

由于此解决方法的性质，您需要特别注意固定元素.例如，navbar fixed"的填充.需要设置为 html 而不是 body (如何描述 在引导文档中).

Because of the nature of this workaround, you need extra care for fixed elements. For example the padding for "navbar fixed" needs to be set to html and not to body (how it is described in bootstrap doc).

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

带包装的替代方案

如果您不喜欢在 html 上设置 overflow:hidden(有些人不喜欢这样，但它有效，有效且 100% 符合标准)，您可以将 body 的内容包装在一个额外的 div 中.通过这种方法，您可以像以前一样使用它.

If you do not like setting overflow:hidden on html (some people don't like this, but it works, is valid and 100% standards compliant), you can wrap the content of body in an extra div. You can use it as before by using this approach.

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 中的问题:

Issues in Bootstrap:

• #12627
• #9855

更新 2:仅供参考

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

In Bootstrap 3.2.0 they add a workaround to modal.js that tries to handle the issues with Javascript for every invoke of modal.prototype.show(), Modal.prototype.hide() and Modal.prototype.resize(). They add 7 (!) new methods for that. Now about 20% of code from modal.js tries to handle just that issue.

这篇关于Twitter Bootstrap modal 将 html 内容推送到左侧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！