jQuery Twitter Bootstrap modal 向左推送 html 内容

Question

提问by EleventyOne

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

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

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

你可以在这里看到问题：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.

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

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

我已经根据 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>

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

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

Answer 1

采纳答案by TLindig

For bootstrap 3.x.x.

对于引导程序 3.xx

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

我找到了一个解决方案，它适用于100% CSS 而没有 JavaScript。

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

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

CSS:

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/

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

I test it on Windows 7 with:

我在 Windows 7 上测试它：

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)

火狐 27.0
铬 32.0.1700.107 m
浏览器模式 8、9、10、Edge（桌面）中的 IE 11
浏览器模式 8、9、10、Edge 中的 IE 11（Windows 手机）

One new little issues I could find with IE:

我可以在 IE 中发现一个新的小问题：

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

IE 有背景 (=body) 滚动鼠标滚轮，如果没有更多的滚动前景。

Care about position:fixed!

关心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 htmland not to body(how it is described in bootstrap doc).

由于此变通方法的性质，您需要特别注意固定元素。例如，“导航栏固定”的填充需要设置为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;
}

alternative with wrapper

带包装的替代品

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

如果你不喜欢 set overflow:hiddenon html（有些人不想要这个，但它有效，有效且 100% 符合标准），你可以将的内容包装body在一个额外的 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/

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

Update:

更新：

Issues in Bootstrap:

Bootstrap 中的问题：

Update 2: FYI

更新 2：仅供参考

In Bootstrap 3.2.0 they add a workaround to modal.jsthat 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.jsonly try to handle that issues.

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

Answer 2

回答by Jimmy Ilenloa

Try this:

尝试这个：

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

回答by clime

It is actually caused by the following rule in bootstrap.css:

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

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

I am not exactly sure why it behaves like that (perhaps to account for scrollbar somehow) but you can change the behaviour with this:

我不确定它为什么会这样（也许是为了以某种方式解释滚动条），但您可以通过以下方式更改行为：

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

EDIT: Actually, this is a reported issue in bootstrap: https://github.com/twbs/bootstrap/issues/9855

编辑：实际上，这是引导程序中报告的问题：https: //github.com/twbs/bootstrap/issues/9855

Answer 4

回答by Jeacovy Gayle

When the model opens, a padding of 17px to the right of the body. The code below should resolve that issue.

当模型打开时，身体右侧的内边距为 17px。下面的代码应该可以解决这个问题。

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

Answer 5

回答by Leniel Maccaferri

Here's the fix proposed by user yshingthat really FIXEDit for me while using Bootstrap v3.1.1and Google Chrome 35.0.1916.114m. The fix comes from a GitHub issue threadregarding this matter:

这是用户 yshing提出的修复程序，它在使用 Bootstrap和 Google Chrome时确实为我修复了它。修复来自有关此问题的 GitHub问题线程：v3.1.135.0.1916.114m

.modal
{
    overflow-y: auto;
}

.modal-open
{
   overflow:auto;
   overflow-x:hidden;
}

The fix will land only in Bootstrap 3.2 as desbribed by mdo.

该修复程序将仅在mdo 描述的Bootstrap 3.2中登陆。

Answer 6

回答by altaf

You just edit .modal-open class form bootstrap.min.css file, I thin it's will be ok .modal-open{overflow:auto}

您只需编辑 .modal-open 类表单 bootstrap.min.css 文件，我认为它会没问题 .modal-open{overflow:auto}

The over-flow:hidden is set there , you just set over-flow:auto .

over-flow:hidden 设置在那里，您只需设置 over-flow:auto 。

Answer 7

回答by a.real.human.being

To prevent the page from shifting in similar instances - for example an accordion opening that goes past the bottom of the page - I add this in CSS:

为了防止页面在类似情况下移动——例如，手风琴打开超过页面底部——我在 CSS 中添加了以下内容：

body {
    overflow-y: scroll;
    height: 100%;
}

The overflow-y: scrollforces the scrollbar to present at all times. To be honest, I can't remember why I put height:100%in there... but you don't seem to require it for this problem.

该overflow-y: scroll部队滚动条出现在所有时间。老实说，我不记得为什么我把它height:100%放在那里......但你似乎不需要它来解决这个问题。

Demo: http://jsfiddle.net/jxX6A/8/

演示：http: //jsfiddle.net/jxX6A/8/

There is still a little movement. But that seems to be present on Bootstrap's own example page: http://getbootstrap.com/javascript/#modals

还是有一点动静。但这似乎出现在 Bootstrap 自己的示例页面上：http: //getbootstrap.com/javascript/#modals

So I'm guessing you're stuck with it... but it's still far better than what you were seeing initially.

所以我猜你被它困住了......但它仍然比你最初看到的要好得多。

EDIT:I might be concerned that adding these styles would interfere with other Bootstrap stuff, as I haven't used it myself, so you might want to double check on that.

编辑：我可能担心添加这些样式会干扰其他 Bootstrap 的东西，因为我自己没有使用过它，所以你可能想仔细检查一下。

Answer 8

回答by Vinay Pandya

i have faced same problem and following solution

我遇到了同样的问题和以下解决方案

.modal-open {
    overflow: visible;
}

.modal-open, .modal-open .navbar-fixed-top, .modal-open .navbar-fixed-bottom {
    padding-right:0px!important;
}

Answer 9

回答by pmanOnu

A lot has changed since bootstrap 3.3.6 so the solutions above may not suffice.

自引导程序 3.3.6 以来发生了很多变化，因此上述解决方案可能还不够。

To solve this, look at the setScrollbar function in bootstrap.js (or bootstrap-min.js of course), you will immediately notice that bootstrap is adding padding-right to the body element setting its value to a worked out value of scrollbarWidth plus existing padding-right on the body (or 0 if not).

要解决此问题，请查看 bootstrap.js（当然或 bootstrap-min.js）中的 setScrollbar 函数，您会立即注意到 bootstrap 正在向 body 元素添加 padding-right，将其值设置为计算出的 scrollbarWidth plus 值身体上现有的 padding-right（如果没有，则为 0）。

If you comment out the below

如果你注释掉下面的

//this.$body.css('padding-right', bodyPad + this.scrollbarWidth)

In your css override bootstrap modal-open class with the below

在您的 css 中，使用以下内容覆盖 bootstrap modal-open 类

.modal-open{
  overflow:inherit;
 }

Folks have suggested overflow-y: scroll;the problem with this is that your content shifts if scroll bar does not exists in the first place.

人们认为overflow-y: scroll;这个问题的问题在于，如果滚动条首先不存在，则您的内容会发生变化。

NB As per http://getbootstrap.com/javascript/#modals, always try to place a modal's HTML code in a top-level position in your document

注意根据http://getbootstrap.com/javascript/#modals，始终尝试将模态的 HTML 代码放在文档中的顶级位置

Answer 10

回答by Anakbhai Gida

I have same problem and I got solution that is work for me....

我有同样的问题，我得到了对我有用的解决方案......

body .modal-open {
  padding-right: 0% !important;
  overflow-y: auto;
}

place this code at top of your style.cssfile

将此代码放在style.css文件顶部

jQuery Twitter Bootstrap modal 向左推送 html 内容

提问by EleventyOne

采纳答案by TLindig

回答by Jimmy Ilenloa

回答by clime

回答by Jeacovy Gayle

回答by Leniel Maccaferri

回答by altaf

回答by a.real.human.being

回答by Vinay Pandya

回答by pmanOnu

回答by Anakbhai Gida

相关推荐

最近更新

标签

jQuery Twitter Bootstrap modal 向左推送 html 内容

提问by EleventyOne

采纳答案by TLindig

回答by Jimmy Ilenloa

回答by clime

回答by Jeacovy Gayle

回答by Leniel Maccaferri

回答by altaf

回答by a.real.human.being

回答by Vinay Pandya

回答by pmanOnu

回答by Anakbhai Gida

相关推荐

如何在没有 jQuery 的情况下在 JavaScript 中的元素之前插入 HTML？

使用 jQuery 和 JSON 来填充表单？

jQuery 如何通过javascript或jquery在html5中设置<input>的最大值和最小值？

jQuery 模拟 TAB 键按下：聚焦由 `tabIndex` 确定的下一个元素

相关推荐

最近更新

标签