Bootstrap：折叠导航栏 - 无选项

Question

我在创建导航栏（包含多个下拉菜单）后尝试添加可折叠导航栏功能，但我似乎无法让它工作。我想这可能是因为我嵌套的 div 太多，不知道要显示什么？

这里有一个 fiddle 有点代表实际行为（有一些 jQuery 我没有包括在内）：

.html

<nav class="navbar navbar-default">
  <div class="container-fluid"> 
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="collapsible-navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
     </button>
    </div>

      <div class="row collapse navbar-collapse" id="collapsible-navbar">
        <div class="col-sm-2 text-center">
          <ul class="nav navbar-nav navbar-left collapse navbar-collapse" id="collapsible-navbar">
            <li class="navbar-link"><a href="#" class="navbar-link-header">Testimonials</a></li>
            <ul class="dropdown-nav row clients">
                    <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">Client 1</a></li>
                    <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">Client 2</a></li>
                    <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">Client 3</a></li>
                    <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">Client 4</a></li>
            </ul>
          </ul>
        </div>
        <div class="col-sm-2">
          <ul class="nav navbar-nav navbar-left">
            <li class="navbar-link"><a href="#" class="navbar-link-header">Locations</a></li>
            <ul class="dropdown-nav row locations">
                    <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">Newton, MA</a></li>
                    <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">Peadbody, MA</a></li>
                    <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">Houston, TX</a></li>
                    <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">Dallas, TX</a></li>
            </ul>
          </ul>
        </div>
        <div class="col-sm-4 text-center">
            <img src="smallw_red_shaddow_small.jpg" width="152" height="75" alt=""/>
        </div>
        <div class="col-sm-2">
          <ul class="nav navbar-nav navbar-right">
            <li class="navbar-link"><a href="#" class="navbar-link-header">Information</a></li>
                <ul class="dropdown-nav row information">
                    <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">The Program</a></li>
                    <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">The Food</a></li>
                    <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">SMT</a></li>
                    <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">Vibratrim</a></li>
                </ul>
          </ul>
        </div>
        <div class="col-sm-2">
          <ul class="nav navbar-nav navbar-right">
            <li class="navbar-link"><a href="#" class="navbar-link-header">Sign In</a></li>
                <ul class="dropdown-nav row sign_in">
                    <li class="col-md-4 dropdown-nav-link"><a href="#" class="dropdown-link-a">A</a></li>
                    <li class="col-md-4 dropdown-nav-link"><a href="#" class="dropdown-link-a">B</a></li>
                    <li class="col-md-4 dropdown-nav-link"><a href="#" class="dropdown-link-a">C</a></li>
                </ul>
          </ul>
        </div>
      </div>
</div>
</nav>

好像我点击"sandwich"图标的时候没有切换，collapse

的display: none属性

Answer 1

我注意到的第一件事是您没有正确定位按钮元素中的导航栏。

它应该是 data-target="#collapsible-navbar" 并且您还应该将 aria-expanded="false" 添加到按钮元素。

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsible-navbar aria-expanded="false"">

Bootstrap：折叠导航栏 - 无选项

Bootstrap: Collapse navbar - no options

css

collapse

navbar

twitter-bootstrap

.html