Bootstrap Modal不会变灰100％

Question

点击时尝试让Bootstrap Modal灰显背景。它工作得很好，但左侧边栏不会变灰。知道为什么吗？

<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 col-md-2 sidebar">
      <ul class="nav nav-sidebar">
        <li><a href="/index">Customers</a></li>
        <li><a href="/company">Company</a></li>
      </ul>
    </div>
  </div>

  <!-- Button trigger modal -->
  <button type="button" class="btn btn-info btn-md" data-toggle="modal" data-target="#myModal">
    New company
  </button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="myModalLabel">Add company</h4>
        </div>

        <div class="modal-body">
          {% from "_formhelpers.html" import render_field %}
          <form action="/company/create" method="POST">
              <div class="form-group">
                  {{ render_field(form.name, class="form-control") }}
              </div>
              {{ error }}
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="submit" class="btn btn-primary">Save changes</button>
        </div>
        </form>
      </div>
    </div>
  </div>

  <button type="button" class="btn btn-success btn-md" data-toggle="modal" data-target="#myNewModal">
    New customer
  </button>

  <!-- Modal -->
  <div class="modal fade" id="myNewModal" tabindex="-1" role="dialog" aria-labelledby="myNewModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="myModalLabel">Add customer</h4>
        </div>

        <div class="modal-body">
          {% from "_formhelpers.html" import render_field %}
          <form action="/customer/create" method="POST">
              <div class="form-group">
                  {{ render_field(forms.name, class="form-control") }}
              </div>
              <div class="form-group">
                  {{ render_field(forms.email, class="form-control") }}
              </div>
              <div class="form-group">
                  {{ render_field(forms.summary, class="form-control") }}
              </div>
              <div class="form-group">
                  {{ render_field(forms.purpose, cols="100", rows="10", class="form-control") }}
              </div>
              <div class="form-group">
                  {{ render_field(forms.company, class="form-control") }}
              </div>
              {{ error }}
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="submit" class="btn btn-primary">Save changes</button>
        </div>
        </form>
      </div>
    </div>
  </div> 



  <h2 class="sub-header">Customers</h2>    


  <div class="table-responsive">
    <table class="table table-striped">
      <thead>
        <tr>
          <th>Number</th>
          <th>Name</th>
          <th>Company</th>
        </tr>
      </thead>
      {% for customer in customers %}
      <tbody>
        <tr>
          <td>{{ customer.id }}</td>
          <td><a href="/profile/{{customer.id}}">{{ customer.name }}</a></td>
          <td>{{ customer.company.name }}</td>
        </tr>
        {% endfor %}

      </tbody>
    </table>
  </div>
</div>

它是本地的Flask应用程序。如果我能提供更多信息，请告诉我。

由于