如何在Bootstrap 3中定義可折疊的漢堡包菜單？

Question

我一直在瀏覽我的導航欄和菜單，但是在調整瀏覽器窗口大小時似乎無法觸發“漢堡”菜單。

我在下面嘗試定義數據切換並將其目標設置為主導航欄的嘗試在調整瀏覽器大小時不起作用。

題：

有誰知道為什么該標記不會在調整尺寸時觸發hambuger菜單？

<header>
  <div class="container-fluid">

    //Defined the toggle here, pointing it's data-target to the navBarCollapsable main nav bar.
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navBarCollapsable">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>

    <div class="collapse navbar-collapse" id="navBarCollapsable">
      <nav>
        <ul id="menu" class="nav navbar-nav">
          <li><a>Selection:</a></li>
          <li>
            <a>Assets <span class="arrow">&#9660</span></a>
            <ul class="sub-menu">
              <li>
                <a href="#" class="small" data-value="option1" tabindex="-1">
                  <input type="checkbox" />&nbsp;Option 1</a>
              </li>
              <li>
                <a href="#" class="small" data-value="option2" tabindex="-1">
                  <input type="checkbox" />&nbsp;Option 2</a>
              </li>
              <li>
                <a href="#" class="small" data-value="option3" tabindex="-1">
                  <input type="checkbox" />&nbsp;Option 3</a>
              </li>
              <li>
                <a href="#" class="small" data-value="option4" tabindex="-1">
                  <input type="checkbox" />&nbsp;Option 4</a>
              </li>
              <li>
                <a href="#" class="small" data-value="option5" tabindex="-1">
                  <input type="checkbox" />&nbsp;Option 5</a>
              </li>
              <li>
                <a href="#" class="small" data-value="option6" tabindex="-1">
                  <input type="checkbox" />&nbsp;Option 6</a>
              </li>
            </ul>
          </li>

          <li>
            <div class="horizontalgap" style="width:10px"></div>
          </li>
          <li><a>Profile:</a></li>
          <li>
            <a>Assets <span class="arrow">&#9660</span></a>
            <ul class="sub-menu">
              <li>
                <a href="#" class="small" data-value="option1" tabindex="-1">
                  <input type="checkbox" />&nbsp;Option 1</a>
              </li>
              <li>
                <a href="#" class="small" data-value="option2" tabindex="-1">
                  <input type="checkbox" />&nbsp;Option 2</a>
              </li>
              <li>
                <a href="#" class="small" data-value="option3" tabindex="-1">
                  <input type="checkbox" />&nbsp;Option 3</a>
              </li>
              <li>
                <a href="#" class="small" data-value="option4" tabindex="-1">
                  <input type="checkbox" />&nbsp;Option 4</a>
              </li>
              <li>
                <a href="#" class="small" data-value="option5" tabindex="-1">
                  <input type="checkbox" />&nbsp;Option 5</a>
              </li>
              <li>
                <a href="#" class="small" data-value="option6" tabindex="-1">
                  <input type="checkbox" />&nbsp;Option 6</a>
              </li>
            </ul>
          </li>
          <li>
            <div class="horizontalgap-md"></div>
          </li>
        </ul>
      </nav>
    </div>
  </div>
</header>

Answer 1

如果您看一下此代碼http://codepen.io/macsupport/pen/bKFzD，您會看到nav標簽中同時包含了他的兩種菜單類型，因此請嘗試使用<nav>包裹常規菜單和漢堡菜單

Answer 2

標簽應緊接標簽之后。 還要確保在bootstrap.js之前加載了jquery.js文件。