Question

我使用Bootstrap 3并想知道是否可以使用nav-pills添加辅助菜单，但我希望它的行为类似于辅助导航栏。

https://www.youtube.com/watch?v=0hquzXy252M

我的菜单代码html：

<div class="row">
  <div class="col-md-12">
    <ul class="nav nav-pills">
      <li ng-class="{active: routeBeginsWith('/admin/users')}"><a href="#/admin/users"><span class="glyphicon glyphicon-user"></span> User Management</a></li>
      <li ng-class="{active: routeBeginsWith('/admin/sites')}"><a href="#/admin/sites"><span class="glyphicon glyphicon-globe"></span> Site Management</a></li>
      <li ng-class="{active: routeBeginsWith('/admin/email')}"><a href="#/admin/email"><span class="glyphicon glyphicon-envelope"></span> Email Settings</a></li>
    </ul>
  </div>
</div>

Answer 1

您可以将nav-pills放入容器中，并将position:fixed容器放在主导航器的正下方。 ~~然而，我的简单方法在移动设备上分崩离析。如果你想让它在移动设备上工作，你还需要另一个解决方案（或更复杂的css）。~~

~~.nav-2{ position:fixed; top:50px; left:0px; width:100%; background:#eee; }~~

~~示例：http://www.bootply.com/I4e9jzllNT#~~

编辑：已修复手机

只要您使用响应式主导航，并在药丸容器上更正边距和填充，它也适用于移动设备： http://www.bootply.com/ozq7nO6H2O

.nav-2{
  position:fixed;
  top:50px;
  left:0px;
  width:100%;
  background:#eee;
  padding-top:10px;
  padding-bottom:10px;
  z-index:2;
}

（确认添加z-index：2固定的最终问题;在聊天中进行一些讨论后）

Bootstrap 3二级菜单，使用导航栏下面的导航丸

1 个答案: