即使在折叠时也会显示的引导导航栏链接答案

【问题标题】：Bootstrap Navbar links that show up even when collapsed即使在折叠时也会显示的引导导航栏链接
【发布时间】：2017-01-28 08:18:17
【问题描述】：

我正在使用 Bootstrap 创建一个导航栏。我希望大部分按钮在移动设备上折叠成一个菜单，但我希望主要部分链接始终显示在顶层以便于访问。

例如，这里是未折叠的视图：

我希望“团队”和“线索”按钮即使在折叠时也能保留。 Staff 和 Grid 应该出现在出现的汉堡菜单下。现在，我的navbar-header 中只有navbar-nav 的“顶级”按钮。折叠时，它们采用折叠样式并填充整个宽度和堆栈。

    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#extra-nav" aria-expanded="false">
                    <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="/">
                    Mine
                </a>
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Teams</a></li>
                    <li><a href="#">Clues</a></li>
                </ul>
            </div>

            <div class="collapse navbar-collapse" id="extra-nav">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Staff</a></li>
                    <li><a href="#">Grid</a></li>
                </ul>
            </div>
        </div>
    </nav>

我想要突出显示“活动”按钮，所以如果有一种简单的方法可以通过使用 navbar-btn 来获得这种风格（如果它不在 navbar-collapsed 中，它似乎会保持在顶部，我会很高兴尝试。

【问题讨论】：

将navbar-brand 用于团队和线索，并保留在Mine 中！

标签： css twitter-bootstrap

【解决方案1】：

在navbar-brand 中查看这只是一点点变化。

将navbar-brand 用于团队和线索，并保持在我的中！

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#extra-nav" aria-expanded="false">
        <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="/">
                    Mine
                </a>
      <a class="navbar-brand active" href="">Teams</a>
      <a class="navbar-brand" href="">Clues</a>

    </div>

    <div class="collapse navbar-collapse" id="extra-nav">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Staff</a>
        </li>
        <li><a href="#">Grid</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

谢谢...

【讨论】：