默认情况下，Bootstrap导航菜单在移动设备中未折叠

Question

我正在使用Bootstrap 3.0开发Drupal 8网站主题。我对网络编程很陌生，而且我还没弄清楚如何通过defualt使导航栏崩溃。

任何帮助将不胜感激！

<!-- Header and Navbar -->
<header class="main-header">
  <div class="container">
    <div class="row">
      <div class="col-sm-4 col-md-3">
        {% if page.header %}
          {{ page.header }}
        {% endif %}
      </div>


    <div class="row">
      <div class="navbar-header col-md-12">
        <nav class="navbar navbar-default" role="navigation">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-navigation">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button> 

          {% if page.primary_menu %}
            {{ page.primary_menu }}
          {% endif %}
        </nav>
      </div>
    </div>
  </div>
</header>
<!--End Header & Navbar -->