打开Bootstrap模态时出现问题

Question

在我正在处理的当前项目中，当我打开模式并关闭它时，html页面会缩小，此外，当模式出现时，滚动条也会被禁用，即使模式关闭也不会出现，因此我无法滚动我的页面。

此外，当滚动条消失时，这些部分将显示为空白，这是我不需要的。

以下是打开模式后的快照，滚动条消失了

关闭页面后缩小

我正在导航栏内添加模态。单独运行导航栏组件时，模式不会显示任何这些问题。该图片的快照在下面

我在这里打开模式，这不会导致页面缩小

关闭模态后

此链接中提供了代码

我有链接的标头和索引。.https://github.com/darshanhosahalli/example/blob/master/header.jsp https://github.com/darshanhosahalli/example/blob/master/index.jsp –

这是我使用的代码

<div class="modal-dialog">
   <div class="modal-content">
   <!------------ Modal Header -------------------->
      <div id="modal-header" class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
             <h4 class="modal-title">Sign In</h4>
      </div>
      <div class="modal-body">
         <form action="login" method="post">
             <div class="form-group">
                <label id="modallbl" for="email">Email address:</label>
                <input type="email" class="form-control" id="email" name="email">
             </div>
             <div class="form-group">
               <label id="modallbl" for="pwd">Password:</label>
               <input type="password" class="form-control" id="pwd" name="password">
             </div>
             <button id="modalButton" type="submit" class="btn btn-primary">
               <SPAN class="glyphicon glyphicon-log-in" ></SPAN>                     Sign In
             </button>
             <div id="chkbox" class="checkbox">
                <label id="modallbl1"><input type="checkbox">Stay Signed in</label>
             </div>
         </form>
      </div>
    </div>
 </div>