Question

我已经设法让2个可折叠的导航栏在Bootstrap 3.0.2上完美运行 - 两个导航栏都折叠为2个漂亮的按钮，允许单独访问每个导航栏。

关键是现在我需要在-sm，-md和-lg上保留其中一个导航栏，并且只显示在-xs上。

最简单的方法是在导航栏上设置“hidden-sm，hidden-md，hidden-lg”（实际上是什么），但每当我切换到-xs时，我们会得到“显示折叠菜单”的副作用（由于hiddens设置） - 有没有办法避免在-xs上扩展de菜单，或者在-sm，-md和-lg上隐藏导航栏的其他方法？

谢谢！

Answer 1

我想说，只需使用.visible-xs：

<nav class="navbar navbar-inverse visible-xs" role="navigation">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" 
            data-toggle="collapse" 
            data-target="#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="#">Brand</a>
  </div>
  <div class="collapse navbar-collapse" id="navbar-collapse-1">...</div>
</nav>

<nav class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" 
            data-toggle="collapse" 
            data-target="#navbar-collapse-2">
      <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="#">Brand</a>
  </div>
  <div class="collapse navbar-collapse" id="navbar-collapse-2">...</div>
</nav>

<强> Bootply

Bootstrap 3.0.2 - 如何保留2个可折叠的导航栏，但仅在折叠时显示其中一个

1 个答案: