Html 如何：非折叠导航项引导3

我到处寻找这个问题，但没有找到“正确”的答案

只是我自己想出来的。。想和大家分享一下，希望对大家有所帮助

BS3的问题是它首先是移动的，这通常是一件好事。。只是不管折叠状态如何，我都需要导航栏中的一些“默认”选项。就像BS2一样

---

那么我们如何做到这一点呢？

有一件事是显而易见的，看看html代码，

.navbar头

保持原样，不会折叠。另一件事，神奇的折叠按钮有一些隐藏自己的方式，可能是CSS，但嘿，想法是抽象这一层，所以我们不必担心它

但我们可以利用这一点，让我们把我想展示的链接放在那里，它们不会崩溃

您将看到列表项将垂直结束，这不是您想要的。。那么它为什么会这样做呢

嗯。。如果您使用Firebug或其他一些开发检查器，您会发现这些项已设置为

display:block，这使它们成为按下下一项的屏幕宽度

我们需要改变这种行为。因此，让我们向
ul
添加一个新类，我们可以在自定义CSS中定义该类。我把它命名为
无折叠
，但你可以随意命名它

<nav role="navigation" class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" data-toggle="collapse" data-target="#bs-navbar-collapse" class="navbar-toggle">
            <span class="sr-only">Hamburger menu</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
      </button>
      <a href="#" class="navbar-brand glyphicon glyphicon-home" title="Home"></a>
      <!-- THIS IS WHERE THE MAGIC HAPPENS! -->
      <ul class="nav navbar-nav no-collapse">
        <li><a href="#">Apple</a>
        </li>
        <li><a href="#">Banana</a>
        </li>
      </ul>
    </div>
    <!-- THE STUFF IN THIS DIV WILL COLLAPSE.. -->
    <div id="bs-navbar-collapse" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">More Fruits <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li class="dropdown-header">Citrus</li>
            <li>
                <a href="#">Lemon</a>
            </li>
            <li>
                <a href="#">Orange</a>
            </li>
            <li class="divider"></li>
            <li class="dropdown-header">    
                Also a fruit
            </li>
            <li>
                <a href="#">Tomato</a>
            </li>
          </ul>
        </li>
        <li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Veggies <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li class="dropdown-header">Green stuff</li>
            <li>
                <a href="#">Spinache</a>
            </li>
            <li>
                <a href="#">Lettuce</a>
            </li>
            <li class="divider"></li>
            <li class="dropdown-header">Other stuff</li>
            <li><a href="#">Carrot</a>
            </li>
            <li><a href="#">Romenesko broccoli</a>
            </li>
          </ul>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li>
            <a href="#">This works</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

现在在Bootply中，它看起来是这样的：source here:

现在，我们可以在移动设备的屏幕上看到健康的苹果和香蕉，而无需求助于汉堡包菜单
 查看html代码有一件事是显而易见的，
.navbar头
保持原样，不会折叠。另一件事，神奇的折叠按钮有一些隐藏自己的方式，可能是CSS，但嘿，想法是抽象这一层，所以我们不必担心它

但我们可以利用这一点，让我们把我想展示的链接放在那里，它们不会崩溃

您将看到列表项将垂直结束，这不是您想要的。。那么它为什么会这样做呢

嗯。。如果您使用Firebug或其他一些开发检查器，您会发现这些项已设置为
display:block，这使它们成为按下下一项的屏幕宽度

我们需要改变这种行为。因此，让我们向
ul
添加一个新类，我们可以在自定义CSS中定义该类。我把它命名为
无折叠
，但你可以随意命名它

<nav role="navigation" class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" data-toggle="collapse" data-target="#bs-navbar-collapse" class="navbar-toggle">
            <span class="sr-only">Hamburger menu</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
      </button>
      <a href="#" class="navbar-brand glyphicon glyphicon-home" title="Home"></a>
      <!-- THIS IS WHERE THE MAGIC HAPPENS! -->
      <ul class="nav navbar-nav no-collapse">
        <li><a href="#">Apple</a>
        </li>
        <li><a href="#">Banana</a>
        </li>
      </ul>
    </div>
    <!-- THE STUFF IN THIS DIV WILL COLLAPSE.. -->
    <div id="bs-navbar-collapse" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">More Fruits <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li class="dropdown-header">Citrus</li>
            <li>
                <a href="#">Lemon</a>
            </li>
            <li>
                <a href="#">Orange</a>
            </li>
            <li class="divider"></li>
            <li class="dropdown-header">    
                Also a fruit
            </li>
            <li>
                <a href="#">Tomato</a>
            </li>
          </ul>
        </li>
        <li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Veggies <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li class="dropdown-header">Green stuff</li>
            <li>
                <a href="#">Spinache</a>
            </li>
            <li>
                <a href="#">Lettuce</a>
            </li>
            <li class="divider"></li>
            <li class="dropdown-header">Other stuff</li>
            <li><a href="#">Carrot</a>
            </li>
            <li><a href="#">Romenesko broccoli</a>
            </li>
          </ul>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li>
            <a href="#">This works</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

现在在Bootply中，它看起来是这样的：source here:

现在，我们可以在移动设备的屏幕上看到健康的苹果和香蕉，而无需求助于汉堡包菜单