如果菜单项太多，如何将它们收集到折叠菜单中

Question

我有一个显示类别项目的导航栏。如果菜单项超过导航栏，我如何将它们收集到带有bootsrap 3.0的下拉菜单中

这里是当前导航栏，因为视点，它只显示10个。我有更多项目，但没有显示。  http://www.cpearson.com/excel/returningarraysfromvba.aspx

取决于屏幕大小我如何将它们收集到下拉菜单中，所以它看起来像这样（我鼠标悬停在所有类别和菜单上）

有没有办法用bootsrap css做到这一点？

感谢

Answer 1

有一个很好的例子here，它可以帮助你开始并让你对如何nav-bar课程的工作有所了解。

<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
    <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="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
    <li><a href="#">Link</a></li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">One more separated link</a></li>
      </ul>
    </li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </li>
  </ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>

我已经创建了一个fiddle，您可以查看一下。当然，这是一个简单的示例，但您可以根据需要使用自定义CSS样式进行扩展。