Question

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

例如，这是非折叠视图：

我希望“团队”和“线索”按钮在折叠时保持不变。工作人员和网格应出现在出现的汉堡菜单下。现在我只在我的navbar-nav中将{顶级'按钮作为navbar-header。折叠时，它们采用折叠样式并填充整个宽度和堆叠。

    <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中，它会显示在顶部，那么可以轻松获得这种风格我很乐意尝试。

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

谢谢...

即使折叠时出现的Bootstrap Navbar链接

1 个答案: