javascript - Bootstrap : Header moves when modal opens

Question

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

示例如下:http://jsfiddle.net/D2RLR/7400/

我希望它完全不动。我知道这是由滚动条引起的，这就是为什么 fiddle 中的容器设置为 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-open {
  position: fixed;
  overflow: scroll;
  width: 100%;
  padding-right: 0!important;
}