Question

我正在使用Bootstrap框架，并且在我的标题和模态方面遇到了一些问题。我页面上的标题是固定的，当模态打开时，它会向右移动几个像素，并在模态关闭时再次向后移动。

此处显示了一个示例：http://jsfiddle.net/D2RLR/7400/

我希望它根本不动。我知道这是由滚动条引起的，这就是为什么小提琴中的容器设置为2000px。我有什么想法可以解决这个问题？

代码如下：

HTML

<div class="container">

   <header>
    <nav id="menu" class="dl-menuwrapper">
    <a href="#" class="menu-toggle dl-trigger"><i class="fa fa-reorder"></i></a>
      <ul class="dl-menu">
        <li>
         <a href="#home" class="scroll"><i class="fa fa-home"></i>Home</a>
        </li>
        <li><a href="#profile" class="scroll"><i class="fa fa-user"></i>Profile</a></li>
      </ul>
    </nav>

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

CSS

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css');

.container {
    margin-top: 10px;
}

button {
    margin-top:100px;
}

.modal-content {
     height:500px;   
}

header {
        width: 150px;
        margin:auto;
        left:0;
        right:0;
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
        text-align: center;
        position: fixed;
        background-color:rgba(0, 0, 0, 0.90);
        z-index: 2;
    }

Answer 1

试试这个

.modal {
    overflow-y: auto;
}

.modal-open {
    overflow: auto;
}

Answer 2

简单修复

.modal-open {
  position: fixed;
  overflow: scroll;
  width: 100%;
  padding-right: 0!important;
}

Answer 3

更新了答案

这应该可以解决问题：

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

JSFIDDLE HERE

希望这有帮助!!!

如果你想知道为什么，“模态打开”类正在应用“padding-right：15px”的内联样式，所以只需覆盖CSS，它似乎工作正常。

Answer 4

这种情况发生在模态出现时，身体接收到“溢出：隐藏”。这会导致滚动条隐藏，距离指的是滚动条宽度。

要测试它，请使用：

body{
    overflow: scroll !important;
}

“修复”这个问题是，滚动条在浏览器之间略有不同，所以或者你让滚动条始终可见，或者你用jquery（大约18px）添加一些padding-right;

Answer 5

这只是因为你的身体失去滚动条而你的身体宽度代表滚动条宽度扩展。添加溢出：滚动;到body css属性或使用一些自定义滚动条js插件 - 有滚动条不与窗体共享窗口宽度。

Answer 6

当模态打开时，页面上的所有内容都在移动。此外，类.modal-open正在加入body标签。因此，我尝试向padding-right: 15px;添加.modal-open。身体不再移动，除了header。所以我还在padding-right: 15px添加了.modal-open header，现在一切正常。

应添加CSS：

＆＃13;

.modal-open {
  padding: right: 15px;
}
.modal-open header {
  padding: right: 15px;
}

＆＃13;

Answer 7

无效但从

更改引导程序本身

(this.$body.css("padding-right")||0,10)

到

(this.$body.css("padding-right")||0,0)

花了我一个小时才找到并改变

Answer 8

您可以在CSS文件中打开模型时移动标题：

.modal-open header { padding-right: 17px; }

Answer 9

这个问题已在bootstrap的repo中报告，我发现这个解决方案适合我。

https://github.com/twbs/bootstrap/issues/14040

$(document).ready(function(){
    $(window).load(function(){
        var oldSSB = $.fn.modal.Constructor.prototype.setScrollbar;
        $.fn.modal.Constructor.prototype.setScrollbar = function () {
            oldSSB.apply(this);
            if(this.bodyIsOverflowing && this.scrollbarWidth) {
                $('.navbar-fixed-top, .navbar-fixed-bottom').css('padding-right', this.scrollbarWidth);
            }       
        }
        var oldRSB = $.fn.modal.Constructor.prototype.resetScrollbar;
        $.fn.modal.Constructor.prototype.resetScrollbar = function () {
            oldRSB.apply(this);
            $('.navbar-fixed-top, .navbar-fixed-bottom').css('padding-right', '');
        }
    });
});

Answer 10

为我工作：

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

Answer 11

只需将“is-fixed”添加到您的头类：

<header class="is-fixed">

这个类对你的设计没有影响。但是当模态打开时，Bootstrap 将添加到具有此类的每个元素中，如下所示：

style="padding-right: 17px;"

其中 17px 是滚动条的实际宽度。 Bootstrap 对 body 元素做同样的事情。

<body> //close modal
<body class="modal-open" style="padding-right: 17px;"> //open modal

Bootstrap：当模态打开时，标题移动

11 个答案: