Question

我目前有一个导航栏，其中包含一些菜单项，这些菜单项在移动模式下会崩溃，而某些菜单项则不会。在非移动模式下，我无法将折叠菜单项（我的注销链接）设置为非折叠菜单项（glyphicon链接）的正确。

如何在下方实现所需的导航栏右侧布局？

我的HTML：

＆＃13;

<nav role="navigation" class="navbar navbar-default navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header navbar-right pull-right">
      <ul class="nav navbar-nav pull-left">
        <li class="pull-right"><a href="#"><span class="glyphicon glyphicon-bell"></span></a></li>
        <li class="pull-right"><a href="#"><span class="glyphicon glyphicon-alert"></span></a></li>
      </ul>
      <button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle">
        <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="visible-xs-block clearfix"></div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav navbar-left">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Log out</a></li>
      </ul>
    </div>
  </div>
</nav>

＆＃13;

Answer 1

可能有更好的方法，但这也很有效：

<nav role="navigation" class="navbar navbar-default navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header navbar-right pull-right">
      <ul class="nav navbar-nav pull-left visible-xs">
        <li class="pull-left"><a href="#"><span class="glyphicon glyphicon-bell"></span></a></li>
        <li class="pull-left"><a href="#"><span class="glyphicon glyphicon-alert"></span></a></li>
      </ul>
      <button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle">
        <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="visible-xs-block clearfix"></div>
    <div >
      <ul class="nav navbar-nav navbar-left collapse navbar-collapse">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right collapse navbar-collapse">
        <li  class="pull-left"><a href="#">Log out</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right hidden-xs">
        <li class="pull-left"><a href="#"><span class="glyphicon glyphicon-bell"></span></a></li>
        <li class="pull-left"><a href="#"><span class="glyphicon glyphicon-alert"></span></a></li>
      </ul>
    </div>
  </div>
</nav>

要查看它的实际效果，请将其复制并粘贴到您的Bootply示例中 https://www.bootply.com/NBW8RrCTCG

在bootstrap 3导航栏中排除某些菜单项时排序菜单项

1 个答案: