Bootstrap 3 模式在打开时创建滚动条-解网

问：

我第一次尝试使用 Bootstrap，但遇到了模式对话框问题。使用此页面上的示例代码，当打开模式时，将显示一个滚动条，该滚动条也会将页面上的内容向左移动。

法典：

<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

JSFIDDLE：http://jsfiddle.net/WqRBP/

我正在查看的很多网站都使用 Bootstrap，但它们没有这个问题，那么有没有某种简单的解决方案来解决这个问题？

编辑：滚动条出现在Chrome和IE中，我没有在其他浏览器中进行过测试。

这是我在 JSFIDDLE 中看到的：

enter image description here

twitter-bootstrap 推特-bootstrap-3

0赞 Yogesh 12/30/2013

当我在您的 jsfiddle 中启动模态时，我没有注意到任何滚动条。

0赞 Nate 12/30/2013

@Yogesh 它出现在 Chrome 中，不确定其他浏览器。

0赞 Nate 12/30/2013

@Yogesh我添加了我所看到的图片。我使用的是 Chrome 版本 31.0.1650.63 m。

0赞 lvarayut 12/30/2013

@Nate 你希望它是什么？文本是否应该显示在模态中？

2赞 roadsunknown 2/20/2014

这可能会有所帮助。github.com/twbs/bootstrap/issues/9855

答：

16赞 lvarayut 12/30/2013 #1

出现此问题的原因是，打开模态时，始终将页面向左移动 15px。您可以通过将页面移回右侧 - 来解决此问题。这可以通过使用事件和提供来完成。Twitter Bootstrapmargin-right: -15pxshow.bs.modalhidden.bs.modalBootstrap's modal

$('#myModal').bind('hidden.bs.modal', function () {
  $("html").css("margin-right", "0px");
});
$('#myModal').bind('show.bs.modal', function () {
  $("html").css("margin-right", "-15px");
});

jsFiddle

仅供参考：

show.bs.modal：调用 show 实例方法时，此事件立即触发。如果由单击引起，则单击的元素可用作事件的 relatedTarget 属性。

hidden.bs.modal：当模态完成对用户的隐藏时，将触发此事件（将等待 CSS 转换完成）。

参考

0赞 Nate 12/30/2013

谢谢。我想知道为什么他们向左移动页面并显示滚动条，即使不需要？

0赞 Jad Chahine 5/20/2016

@LVarayut：很好的答案。

34赞 Nate 12/30/2013 #2

LVarayut 的回答让我朝着正确的方向前进，我最终使用的是：

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

.modal {
    overflow-y: auto;
}

2赞 Billy Chan 4/18/2014

我替换了它，它有效。margin-right: 0overflow-y: auto;

2赞 Nate 7/18/2014

你@tom在带有滚动条的页面上测试过它？对我来说，Billy Chan 的更改导致有两个滚动条。

2赞 Tibs 5/23/2014 #3

这是我的解决方案

#myModal{
    overflow:hidden;
}
body {
    overflow-y: scroll !important;
}

有了这个，您将强制您的页面有一个滚动条。

0赞 Ron van der Heijden 7/11/2014

如果您有一个带有滚动条的全屏模式，您将获得 2 个滚动条。

2赞 Ilya 7/22/2014 #4

此问题已在 2014 年 6 月 23 日发布的 Bootstrap 版本 3.2.0 中得到解决。

感谢 @roadsunknown 提供的链接（在问题评论中）。

4赞 empz 7/24/2014

我已经更新到 3.2.0，但仍然遇到这个问题。有什么想法吗？

0赞 Ilya 7/24/2014

修复程序会添加到正文中，因此不应再移动内容。固定的导航栏仍在移动...尝试检查在打开的模式窗口期间滚动条外观是否正确。style="padding-right: 16px;".modal-open { overflow-y:auto }

0赞 Carol Skelly 2/27/2015

我让它适用于 3.2.x，如下所示： bootply.com/VxeV1fiQSkpadding-right:0

0赞 monsur.hoq 8/26/2014 #5

尝试使用以下 css ：

.modal{
    overflow:auto;
}

我已经通过这种方式解决了我的问题。

0赞 godblessstrawberry 9/22/2014 #6

这对我来说是个把戏

$('html').bind('hidden.bs.modal', function () {
   console.log('hidden');
   $("html").css("margin-right", "0px");
});

$('html').bind('hide.bs.modal', function () {
   console.log('hiding');
   $("html").css("margin-right", "-15px");
});

$('html').bind('show.bs.modal', function () {
   console.log('shown');
   $("html").css("margin-right", "-15px");
});

4赞 Joel Enanod Jr 7/14/2015 #7

这是我的解决方案：

.modal {
 margin-right: -15px;
}`

并添加此内容

body.modal-open {
    margin-right: 0 !important;
}

希望这对你有所帮助。

4赞 Walky Toki 8/27/2015 #8

就是这么简单，只需添加到你的css中：

body.modal-open{overflow:hidden!important;}

/*Optional:*/
.modal-open, .modal{padding-right:0!important}

-2赞 Rahul Madakatti 10/18/2015 #9

这主要是由于使用的CDN...从您的页面中删除 CDN https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js“，问题就解决了。我已经做到了。

1赞 Michael 4/7/2016 #10

这对我有用。它应该工作正常

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

0赞 Shafiqul Islam 1/31/2018 #11

在这种情况下，您可以使用自己的 css 覆盖引导主 css，因为有时可能会影响其他。所以这是简单的代码，可以工作

body.modal-open .modal {
    margin-right: -15px !important;
}

body.modal-open {
    margin-right: 0 !important;
}

如果要更改主引导 CSS，请更新此内容

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

0赞 FaAzI Ahamed 6/5/2018 #12

试试这个

  .modal-open {
         overflow-y: auto
     }

0赞 alaster 8/5/2019 #13

就我而言，是我自己的风格导致了这个问题：

html {
    overflow-y: scroll;
}

您可以更改为只有一个滚动条：htmlbody

body {
    overflow-y: scroll;
}

上一个：将左连接限制为返回一个结果？

下一个：如何在MySQL中选择非空列？

Bootstrap 3 模式在打开时创建滚动条

Bootstrap 3 modal creates scrollbar when opened

评论

评论

评论

评论

评论