Bootstrap3中如何定义可折叠的汉堡包菜单？

Question

我一直在尝试设置导航栏和菜单，但似乎无法在调整浏览器大小时触发汉堡包菜单 window。

我在下面的尝试中定义了数据切换并将其目标设置为主导航栏，但在调整浏览器大小时不起作用。

问题：

有谁知道为什么使用此标记调整大小时汉堡菜单没有触发？

<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>

Answer 2

您的标签应该紧跟在标签之后。还要确保 jquery.js 文件在 bootstrap.js.

之前加载

Bootstrap3中如何定义可折叠的汉堡包菜单？

How to define collapsible hamburger menu in Bootstrap 3?

html

css

resolution

twitter-bootstrap

hamburger-menu