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中的链接。

您可以通过展开下面的代码段或查看JSFiddle here来查看此内容。链接都在折叠菜单中直接保持在另一个下方，但在桌面视图中占据两行。将JSFiddle扩展到最大宽度表示当有足够的空间来包含链接时，链接将恢复为单行。

＆＃13;

@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 */
  }
}

＆＃13;

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

＆＃13;

希望这有帮助！：）

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

1 个答案: