使用和不使用Bootstrap 3的折叠导航栏项目

Question

我想保留左侧的“搜索”和“主页”图标，即使菜单是折叠的。我尝试了很多方法，包括使用' navbar -brand‘类，但图标丢失了导航条的菜单链接属性(文本大小，悬停时的颜色等)。

这是我当前菜单的代码：

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="container">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="{{ URL::to('/') }}"></a>    
  </div>

  <!-- START TOGGLEABLE COMPONENTS -->
  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav navbar-left">
      <li><a href="{{ URL::to('/') }}"><span class="glyphicon glyphicon-search"></span></a></li>
      <li><a href="{{ URL::to('/') }}"><span class="glyphicon glyphicon-home"></span></a></li>
      <li><a href="{{ URL::to('/') }}"> Coisas pra fazer</a></li>
      <li><a href="{{ URL::to('noticias') }}"> Comer & Beber</a></li>
      <li><a href="{{ URL::to('atuacao') }}"> Família</a></li>
      <li><a href="{{ URL::to('apoio') }}"> Vida Noturna</a></li>
      <li><a href="{{ URL::to('profissionais') }}"> Acomodações</a></li>
    </ul>
  </div>
  <!-- /.navbar-collapse -->
  </div>
</nav>

Answer 1

如果您希望导航栏中的项目即使在菜单折叠时也能显示，不要将它们放在“折叠导航栏-折叠”中。

尝试将它们严格添加到导航栏标题中，紧跟在折叠的菜单按钮之后。