Question

我想在左侧保留“搜索”和“主页”字形，即使菜单崩溃也是如此。我尝试了许多方法，包括使用'navbar-brand'类，但是glyphicons失去了navbar的菜单链接属性（文本大小，悬停时的颜色等）。

这是我目前的菜单代码：

<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。

使用和不使用Bootstrap 3的折叠Navbar项目

1 个答案: