如何在 Bootstrap 3 中定义可折叠的汉堡菜单？答案

【问题标题】：How to define collapsible hamburger menu in Bootstrap 3?如何在 Bootstrap 3 中定义可折叠的汉堡菜单？
【发布时间】：2016-06-30 16:50:28
【问题描述】：

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

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

问题：

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

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

【问题讨论】：

你粘贴bootstrap.css和bootstrap.js了吗？？？
是的，样式表和 js 引用都在那里。我的引导程序正在渲染，但汉堡包数据切换从未出现在将浏览器重新调整为小尺寸时。
你能把你的代码放在sn-p或jsfiddle吗？
你是从哪里想到这个 DOM 结构的？它不遵循文档，这可能是它不起作用的原因。

标签： html css twitter-bootstrap resolution hamburger-menu

【解决方案1】：

如果你看一下这段代码http://codepen.io/macsupport/pen/bKFzD，你会发现他的两种菜单类型都包含在导航标签中，所以试着用<nav>包装你的普通菜单和汉堡菜单

【讨论】：

【解决方案2】：

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

【讨论】：