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

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

尝试将它们严格添加到 navbar-header，就在折叠的菜单按钮之后。