Twitter Bootstrap modal 将 html 内容推送到左侧

Posted 2023-03-06

【中文标题】Twitter Bootstrap modal 将 html 内容推送到左侧

【英文标题】：Twitter Bootstrap modal pushes html content to the left

【发布时间】：2013-10-20 15:52:02

【问题描述】：

如果我通过 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

【问题讨论】：

是不是打开modal时右侧出现了滚动条造成的？您需要在打开模式时提供 body overflow:hidden 以防止出现这种情况，并在关闭它时提供 overflow:inherit。

@clime 多哈！我相信你是对的，为什么会这样。不幸的是，在 CSS 中将 overflow:hidden 添加到 body 似乎并不能阻止它:(

@EleventyOne 在这里确定修复：***.com/a/23851892/114029

【参考方案1】：

对于引导程序 3.x.x。

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

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

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

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

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

IE 有背景（=body）滚动鼠标滚轮，如果没有更多的东西在前台滚动。

小心position:fixed！

由于此解决方法的性质，您需要特别注意固定元素。 例如，“navbar fixed”的填充需要设置为html，而不是body（如何描述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 的内容额外包装分区。通过这种方法，您可以像以前一样使用它。

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 添加了一个解决方法，该解决方法尝试为每次调用 modal.prototype.show()、Modal.prototype.hide() 和 Modal.prototype.resize() 处理 javascript 问题。他们为此添加了 7 个（！）新方法。现在modal.js 中大约 20% 的代码试图处理这个问题。

【讨论】：

原来的错误是fixed in Bootstrap v3.2.0+，但似乎仍然发生在ui-angular。这个 CSS 修复对我有用（在 ui-angular 更新之前一直使用它）。

我所做的只是添加 .modal-open overflow: auto !important; 并评论一些引导代码 Modal.prototype.setScrollbar = function () var bodyPad = parseInt((this.$body.css('padding-right') || 0), 10) //if (this.bodyIsOverflowing ) this.$body.css('padding-right', bodyPad + this.scrollbarWidth)

它在我的情况下不起作用。对我有用的解决方案是 body.modal-open padding-right: 0px !important;溢出-y：自动；

@TBAG 它有帮助，但它对我不起作用......它将我的 HTML 推到左边，但只有一次，而且不像以前那么多......它仍然移动它5-10px，有什么解决方法的线索吗？

对我来说在 Firefox 中不起作用。它现在已在其他浏览器中修复。

【参考方案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://***.com/a/26500272/2259400 */

【讨论】：

@kashesandr 我更新了 CSS 以删除另一个滚动条。适用于谷歌浏览器。

只是想说这个也适合我。我认为原因是这有 [style] 的东西，引导程序上的模式似乎将 class="modal-open" style="padding-right: 15px" 添加到 body 标记中。

body.modal-open[style] 修复了页面数据表的问题

2021年认真帮了我一把

【参考方案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

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

【讨论】：

嗯，这很有趣。当我添加（jsfiddle.net/jxX6A/18）时，页面上根本没有任何动作。我现在只学习引导程序，所以我想知道是否可以在不影响引导程序的情况下（负面地）以其他方式改变它。

感谢您找到该错误报告。根据该线程中的讨论，更改 margin-right 属性似乎会对 Bootstrap 的其他方面产生有害影响:(

好吧，我不会说其他方面。而在某些浏览器中，它可能会导致在模式打开时将内容拉到右侧:)。所以你可以选择你喜欢的:)。顺便提一句。部分修复应该在引导程序 3.0.1 中。完整的修复将在 3.0.2 中发布

确实如此。但是，另一个答案（body 中的overflow-y:scroll）似乎可以防止这两个问题，只是稍微移动了一点内容，并且与引导程序自己的示例页面上发生的情况相匹配。 ATM，这对我来说似乎是最好的方法。你怎么看？

我不确定，因为他们使用了我的方法的一半修复：github.com/twbs/bootstrap/commit/… 所以这可能不是一个坏主意。但是overflow-y:scroll on body ...可能没问题，我会尝试更多的浏览器并选择更好的浏览器:)。

【参考方案4】：

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

body 
padding-right: 0px !important;

【讨论】：

我的网站上使用 BS 3.3.7 的模态框正好向 body 标签添加了 17px，这解决了问题。谢谢！

【参考方案5】：

这是 user yshing 提出的修复程序，在使用 Bootstrap v3.1.1 和 Google Chrome 35.0.1916.114m 时，它确实为我FIXED。修复来自 GitHub issue thread 关于此事：

.modal

    overflow-y: auto;


.modal-open

   overflow:auto;
   overflow-x:hidden;

该修复程序仅适用于 Bootstrap 3.2 as desbribed by mdo。

【讨论】：

注意：这不是官方修复。官方修复是github.com/twbs/bootstrap/commit/…

不幸的是，这并不能阻止正文在模态打开时显示不美观的右填充。

对我来说没有按预期工作。是的 - 没有班次。但是我在右边有两个垂直滚动条。

【参考方案6】：

为了防止页面在类似的情况下发生移动 - 例如超出页面底部的手风琴开口 - 我在 CSS 中添加了这个：

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

overflow-y: scroll 强制滚动条始终显示。老实说，我不记得为什么我把height:100% 放在那里了……但你似乎不需要它来解决这个问题。

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

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

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

编辑：我可能担心添加这些样式会干扰其他 Bootstrap 内容，因为我自己没有使用过，所以您可能需要仔细检查。

【讨论】：

是的，这似乎使对话框像在引导程序自己的示例页面上一样工作。查看boostrap.css 文件，我发现他们在.modal 类本身中也设置了overflow-y:scroll。我真的不确定这里的正确方法是什么。

这就是我一直想要的，并且搜索了高和低但找不到它（可能是因为缺乏正确的问题措辞），谢谢，我完全陷入困境由于滚动条消失和重新出现引起的烦人的水平抖动效果，实际上它让我重新考虑了引导程序以外的其他选项。

【参考方案7】：

您只需编辑 .modal-open 类表单 bootstrap.min.css 文件，我认为它会好的.modal-openoverflow:auto

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

【参考方案8】：

我也遇到过同样的问题，解决方法

.modal-open 
    overflow: visible;


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

【参考方案9】：

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

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

如果您将以下内容注释掉

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

在您的 css 中，使用以下内容覆盖引导模式打开类

.modal-open
  overflow:inherit;
 

人们建议overflow-y: scroll; 这样做的问题是，如果滚动条首先不存在，您的内容就会发生变化。

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

【参考方案10】：

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

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

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

【参考方案11】：

在结核病问题中找到了这个答案

只需在 css 下方添加这个，小动作就会得到修复

body, .navbar-fixed-top, .navbar-fixed-bottom 
  margin-right: 0 !important;

感谢https://github.com/tvararu

【讨论】：

这并没有解决我的问题。有什么想法吗？

【参考方案12】：

我使用 Bootstrap v3.3.4 看到这个问题，我理解 Bootstrap modal 会在 body 右侧添加 17px 填充，所以只需使用以下代码：

body 
    padding-right: 0 !important;

【参考方案13】：

这里没有解决我的问题。但是我从 Github 获得的 Css 对我有用。

body.modal-open 
padding-right: 0px !important;
overflow-y: auto;

【参考方案14】：

只需简单地做到这一点，仅此而已

.modal-open 
padding-right: 0 !important;

为我工作。短小精悍。

【参考方案15】：

这是一个已报告的引导问题：https://github.com/twbs/bootstrap/issues/9855

这是我的临时快速修复，它使用固定顶部导航栏工作，仅使用 javascript。将此脚本与您的页面一起加载。

$(document.body)
.on('show.bs.modal', function () 
    if (this.clientHeight <= window.innerHeight) 
        return;
    
    // Get scrollbar width
    var scrollbarWidth = getScrollBarWidth()
    if (scrollbarWidth) 
        $(document.body).css('padding-right', scrollbarWidth);
        $('.navbar-fixed-top').css('padding-right', scrollbarWidth);    
    
)
.on('hidden.bs.modal', function () 
    $(document.body).css('padding-right', 0);
    $('.navbar-fixed-top').css('padding-right', 0);
);

function getScrollBarWidth () 
    var inner = document.createElement('p');
    inner.style.width = "100%";
    inner.style.height = "200px";

    var outer = document.createElement('div');
    outer.style.position = "absolute";
    outer.style.top = "0px";
    outer.style.left = "0px";
    outer.style.visibility = "hidden";
    outer.style.width = "200px";
    outer.style.height = "150px";
    outer.style.overflow = "hidden";
    outer.appendChild (inner);

    document.body.appendChild (outer);
    var w1 = inner.offsetWidth;
    outer.style.overflow = 'scroll';
    var w2 = inner.offsetWidth;
    if (w1 == w2) w2 = outer.clientWidth;

    document.body.removeChild (outer);

    return (w1 - w2);
;

这是工作示例：http://jsbin.com/oHiPIJi/64

【参考方案16】：

我遇到了同样的问题，以下解决方案对我有用

.modal-open 
    overflow: visible;

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

【参考方案17】：

尝试改变下面的所有出现

$body.css('padding-right',XXX)

与

$body.css('padding-right'0)

在您的 bootstrap.js 文件中。

仅此而已..

【参考方案18】：

只需添加一个类

.modal-open padding-right:0px !important;

它对我有用

【参考方案19】：

我解决了我的问题，我认为它适用于所有人。 在 bootstrap.js 中有一行：

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

这意味着在某些情况下，Bootstrap 会在打开模式时添加滚动条宽度的 padding-right。所以@pmanOnu 说对了一半，但不要删除整行代码，只删除

将 bootstrap.js 中的 bodyPad + this.scrollbarWidth 替换为 0

让Bootstrap添加一个0px的padding-right（和不添加一样）。

然后将 .modal-open overflow: initial; 添加到您的自定义 css 中，以防止 Bootstrap 在打开模式时禁用滚动条。

【参考方案20】：

如果以上所有解决方案都不起作用，可能是因为定位了内容，看看modal的位置就行了

body.modal-open

   padding-right: 0 !important; // not important
   position: relative;

【参考方案21】：

所以事实证明我实际上得到了 250 像素左右的右边距。我的问题似乎是 .modal-open 被设置为 position: fixed，无论出于何种原因，这都是原因。所以在我的情况下，修复是相似的，但我将位置值设置为默认值，如下所示：

.modal-open position: initial !important;

【参考方案22】：

对于仍在为此苦苦挣扎的任何人 - 最新版本的 Bootstrap 具有本机修复程序。只需从最新版本更新 bootstrap.min.css 和 bootstrap.min.js 文件即可。

http://getbootstrap.com/

【参考方案23】：

我真的不喜欢所提供的任何解决方案，并使用它们的组合（以及我之前对 qTip 模态进行的修复）来提出最适合我使用 Bootstrap v3.3.7 的解决方案。

更新：解决了 ios 上固定导航栏定位的问题。

CSS：

/* fix issue with scrollbars and navbar fixed movement issue with bootstrap modals */
html 
    overflow-y: scroll !important;


html.noscroll 
    position: fixed;
    width: 100%;
    top:0;
    left: 0;
    height: 100%;
    overflow-y: scroll !important;


.modal-open .modal 
    padding-right: 0 !important;


.modal-open[style] 
    padding-right: 0px !important;


.modal::-webkit-scrollbar 
    width: 0 !important; /*removes the scrollbar but still scrollable*/

/* end modal fix */

JavaScript：

/* fix for modal overlay scrollbar issue */
$(document).ready(function() 
    var curScrollTop;
    var prevScrollTop;
    $('.modal').on('show.bs.modal', function() 
        curScrollTop = $(window).scrollTop();
        $('html').addClass('noscroll').css('top', '-' + curScrollTop + 'px');
        $('.navbar-fixed-top').css('position':'absolute','top':curScrollTop);     
        $(window).on("resize", function()              
            var bodyH = $("body").height();
            var winH = $(window).height();
            if (winH > bodyH) 
                prevScrollTop = curScrollTop;
                curScrollTop = 0;
                $('.navbar-fixed-top').css('position':'absolute','top':'0'); 
            
            else 
                $('html').removeClass("noscroll");
                if (curScrollTop == 0) window.scrollTo(0, prevScrollTop);
                else window.scrollTo(0, curScrollTop);
                curScrollTop = $(window).scrollTop(); 
                $('.navbar-fixed-top').css('position':'absolute','top':curScrollTop);  
                $('html').addClass("noscroll");
            
            $('html').css('top', '-' + curScrollTop + 'px');
        )
    )
    $('.modal').on('hide.bs.modal', function() 
        $('html').removeClass("noscroll");
         $('.navbar-fixed-top').css('position':'fixed','top':'0');
        window.scrollTo(0, curScrollTop);
        $(window).off("resize");
    )
)

这允许“固定”背景，但仍然允许模态框可滚动，解决了双滚动条和固定导航栏重新定位的问题。

请注意，当模式关闭时，还有其他代码可以记住“滚动”位置（并返回到该位置）。

希望这可以帮助其他希望实现我所追求的目标的人。

【参考方案24】：

我找到了 Agni Pradharma 为我工作的答案；但并非完全在 Chrome 中。

看起来文档滚动条比其他元素滚动条宽；所以我编辑了 getScrollBarWidth 函数。

它只是首先检查宽度；移除文档滚动条；然后比较差异。它也恰好是更少的代码。

$(document.body)
    .on('show.bs.modal', function () 
    if (this.clientHeight <= window.innerHeight) 
        return;
    
    // Get scrollbar width
    var scrollbarWidth = getScrollBarWidth()
    if (scrollbarWidth) 
        $(document.body).css('padding-right', scrollbarWidth);
        $('.navbar-fixed-top').css('padding-right', scrollbarWidth);
    
)
.on('hidden.bs.modal', function () 
    $(document.body).css('padding-right', 0);
    $('.navbar-fixed-top').css('padding-right', 0);
);

function getScrollBarWidth () 
    var fwidth = $(document).width();
    $('html').css('overflow-y', 'hidden');
    var swidth = $(document).width();
    $("html").css("overflow-y", "visible");
    return (swidth - fwidth);
;

【参考方案25】：

这是我使用的，只要您不介意强制滚动条，它将在 Bootstrap 3.2.0 中 100% 工作。

.modal-open .modal 
  overflow-x: hidden;
  overflow-y: scroll;

【参考方案26】：

最好的方法是： 添加到正文overflow-y: scroll

并从 bootstrap.js 中删除 4 个函数 -

 checkScrollbar
 setScrollbar
 resetScrollbar
 measureScrollbar

【参考方案27】：

对我来说，这样可以正常工作

 .modal-open .modal 
  overflow-x: scroll;
  overflow-y: scroll;

【参考方案28】：

对我来说，以下似乎可行 - 在 Linux 上的 Firefox 和 Chrome 中进行了测试：

body.modal-open 
    overflow: inherit;
    padding-right: inherit !important;

【参考方案29】：

这对我有用。覆盖添加到主体右侧的 17px 填充：

body.modal-open 
    padding-right: inherit !important;

【参考方案30】：

我通过TBAG进一步调整了这个答案

body.modal-open padding-right: 0px !important;溢出-y：自动；

稍作调整，它就可以在桌面上运行，对于移动设备，溢出设置为隐藏

最终代码

body.modal-open  padding-left: 16px!important; overflow-y: auto; 

希望这会有所帮助！