引导导航栏在标题的顶部和底部有元素

Question

我似乎无法完全理解在导航栏底部和顶部都有元素的引导导航，同时仍然使用可折叠的导航栏。

这是我尝试过的：Fiddle

如您所见，我能够实现导航栏顶部和底部的文本（同时仍然使用可折叠导航栏功能），但是当您在移动设备中查看它时（例如，当菜单折叠并且您点击汉堡标志），它完全搞砸了。

所以这让我想知道我是否没有以正确的方式接近这个？

这是 CSS：

#mainNavBarTop {
    position: absolute;
    margin-top: -10px;
    top: 0;
    left: 0;
}

#mainNavBarBottom {
    position: absolute;
    margin-bottom: -10px;
    bottom: 0;
    left: 0;
}

和 HTML

<nav class="navbar navbar-default">
        <div class="container-fluid">
           <div class="navbar-header"><button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><img src="" /></div>
           <div class="navbar-collapse collapse" id="navbar">

                               <ul class="nav navbar-nav" id="mainNavBarBottom">
                 <li class="bottom"><a href="#">About</a></li>
                 <li class="bottom"><a href="#">Contact</a></li>
              </ul>
              <ul class="nav navbar-nav" id="mainNavBarTop">
                 <li class="bottom"><a href="#">About</a></li>
                 <li class="bottom"><a href="#">Contact</a></li>
              </ul>
              <form class="navbar-form navbar-right" role="search">
                 <div class="form-group"><input class="form-control" type="text" placeholder="Search"/></div>
                 <button class="btn btn-default" type="submit">Submit</button>
              </form>
           </div>
        </div>
     </nav>

Answer 1

如果您希望导航链接在桌面视图上显示为多行，您所要做的就是为容纳图像的导航栏指定 width，并在下拉列表中添加足够的项目，以便它们溢出。

或者，您可以通过将float: right 添加到导航栏的li 元素，将链接压在右侧而不是左侧。请注意，这将反转列表中项目的顺序，因此如果您选择这样做，您可能希望在 HTML 本身中以相反的顺序列出链接。

您可以通过展开下面的 sn-p 或查看 JSFiddle here 来查看这一点。尽管在桌面视图中占据了两行，但这些链接都在折叠菜单中直接位于彼此下方。将 JSFiddle 扩展至最大宽度表明，当有足够的空间容纳链接时，链接将恢复为单行。

@media (min-width: 768px) {
  .navbar-nav.pull-right {
    width: calc(100% - 120px); /* 100% - image width */
  }
  .navbar-nav>li {
    float: right; /* Optionally align items to the right */
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />

<nav class="navbar navbar-default">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#"><img class="img-responsive" src="http://placehold.it/120x30" width="120px;" /></a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav pull-right">
        <li><a href="/browser/saved/">Saved searches</a></li>
        <li><a href="../index.html">Settings</a></li>
        <li><a href="../index.html">About</a></li>
        <li><a href="../index.html">Sign In</a></li>
        <li><a href="../index.html">Another Link</a></li>
        <li><a href="../index.html">Another Link</a></li>
        <li><a href="../index.html">Another Link</a></li>
        <li><a href="../index.html">Another Link</a></li>
      </ul>
    </div>
  </div>
</nav>

希望这会有所帮助！ :)