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

问题描述

如果我打开一个模态对话框，通过Twitter Bootstrap，我注意到它推送页面的所有html内容（即在 container ）到离开一点，然后在关闭后恢复正常。然而，这仅在浏览器宽度足够大而不在移动（即，最小）媒体查询上时发生。这发生在最新版本的FF和Chrome（尚未测试其他浏览器）。

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

注意：您必须增加Result窗口的宽度，因此切换到med或large媒体查询css。

页面基于Bootstrap网站上显示的示例：

 < div class ='container' 
< div class ='page-header'> 
< h4>我的标题< / h4> 
< / div> 
< div id ='content'> 
这是一些内容。 
< / div> 
< div class ='footer'> 
< p>& copy; 2013，我< / p> 
< / div> 
< / div> 
  

我猜这不应该发生，但我不知道完成错误。

修改：这是已知的错误，有关更多（及更新）信息， href =https://github.com/twbs/bootstrap/issues/9855> https://github.com/twbs/bootstrap/issues/9855

解决方案

对于bootstrap 3.xx

我发现了一个解决方案，没有JavaScript 。

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

CSS：

  html {
 overflow：hidden; 
 height：100％; 
} 
 body {
 overflow：auto; 
 height：100％; 
} 
 
 / * unset bs3设置* / 
 .modal-open {
 overflow：auto; 
} 
  

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

我在Windows 7上测试它：

• FireFox 27.0


• Chrome 32.0.1700.107 m


• 11在浏览器模式8,9,10，Edge（桌面）


• IE 11在浏览器模式8,9,10，边缘（windows手机）

IE可以找到一个新的小问题：

IE有鼠标滚轮

关心 position：fixed ！

由于此解决方法的性质，您需要额外注意固定元素。
例如，navbar fixed的填充需要设置为 html ，而不是 body 如何在在bootstrap doc 中进行描述）。

  / *仅适用于固定导航栏：
 *额外填充预定不在body（如doc中所述），
 * 
 *使用的值取决于navbar的高度
 * / 
 html {
 padding-top：50px; 
 padding-bottom：50px; 
} 
  

包装替代
$ b

如果你不喜欢在 html 上设置 overflow：hidden 't想要这个，但它的工作，是有效的和100％标准兼容），你可以包装正文的内容在额外的div。

因为你不需要对固定元素的额外照顾，你可以像以前一样使用它。

  body，html {
 height：100％; 
} 
 .bodywrapper {
 overflow：auto; 
 height：100％; 
} 
 
 / * unset bs3设置* / 
 .modal-open {
 overflow：auto; 
} 
 
 / *额外的固定导航栏的stetting，见bs3 doc 
 * / 
 body {
 padding-top：50px; 
 padding-bottom：50px; 
} 
  

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

更新： p>

Bootstrap中的问题：

• ＃12627


• ＃9855

更新2：FYI
$ b

在Bootstrap 3.2.0中，它们为 modal.js 增加了一个解决方法，它试图用每次调用<$ c时处理Javascript的问题$ c> modal.prototype.show（）， Modal.prototype.hide（）和 Modal.prototype.resize （）。他们添加了7（！）新的方法。现在约。来自 modal.js 的20％的代码只尝试处理该问题。

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

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

Note: You have to increase the width of the "Result" window so it switches to the "med" or "large" media query css.

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.

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

解决方案

For bootstrap 3.x.x.

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

The trick is, 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; 
}

here is an online example: http://jsbin.com/oHiPIJi/43/

I test it on Windows 7 with:

• FireFox 27.0
• Chrome 32.0.1700.107 m
• IE 11 in Browser Mode 8, 9, 10, Edge (Desktop)
• IE 11 in Browser Mode 8, 9, 10, Edge (windows phone)

One new little issues I could find with IE:

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

Care about position:fixed!

Because of the nature of this workaround, you need extra care for fixed elements. For example the padding for "navbar fixed" need to be set to html and not to body (how it is described in 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;
}

alternative with wrapper

If you do not like set overflow:hidden on html (some people don´t want this, but it works, is valid and 100% standard compliant), you can wrap the content of body in an extra div.

Than you do not need extra care for fixed elements, you can use it like before.

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

here is an example: http://jsbin.com/oHiPIJi/47/

Update:

Issues in Bootstrap:

• #12627
• #9855

Update 2: FYI

In Bootstrap 3.2.0 they add a workaround to modal.js that try 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 ca. 20% of code from modal.js only try to handle that issues.

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