html - 使用和不使用 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

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

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