两行的引导导航栏答案

【问题标题】：Bootstrap navbar with two rows两行的引导导航栏
【发布时间】：2016-11-01 21:57:39
【问题描述】：

我想要一个具有两行导航元素的 Bootstrap 3 导航栏，并且导航栏品牌跨越两行。在 SM+ 屏幕尺寸上，两行都是可见的。在 XS 屏幕尺寸上，第二行折叠并显示要打开的图标栏。

SM+

+-------------------------------------------------------------------------------+
|               |                                             Nav-A-1  Nav-A-2  |
|  SITE LOGO    |---------------------------------------------------------------+
|               |  Nav-B-1  Nav-B-2 Nav-B-3 Nav-B-4                 Form-Right  |
+-------------------------------------------------------------------------------+

+-------------------------------------------------------------------------------+
|               |                                             Nav-A-1  Nav-A-2  |
|  SITE LOGO    |---------------------------------------------------------------+
|               |  Nav-Collapsed                                     Hamburger  |
+-------------------------------------------------------------------------------+

导航栏如何做到这一点？

【问题讨论】：

我有点困惑你具体要求什么，导航 A、B 元素应该代表什么？到目前为止，您尝试了哪些代码？
稍微更新了问题以反映有两行导航项。我尝试了什么？从标准的 Bootstrap 导航栏示例代码开始，尝试添加行和列，但遇到两行且仅折叠一行的问题。
这在 Bootstrap 4 中要容易得多：stackoverflow.com/a/42635243/171456

标签： twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

看看下面的代码sn-p

<html>
<head>
  <title>Test</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

  <style type="text/css">
    .navbar.navbar-default {
      margin-bottom: 0px;
    }
    
    @media (max-width:767px) {
      .navbar-toggle.pull-left {
        margin-left: 10px;
      }
    }
    
    .menu .col-sm-2,
    .menu .col-xs-2 {
      padding-right: 0px !important;
    }
    
    .menu .col-sm-10,
    .menu .col-xs-10 {
      padding-left: 0px !important;
    }
    
    .row .well {
      height: 105px;
      margin: 0;
      text-align: center;
    }
    
    .top_link {
      padding: 15px;
    }
  </style>
</head>
<body>
  <div class="row menu">
    <div class="col-sm-2 col-xs-2">
      <div class="well">
        SITE LOGO
      </div>

    </div>
    <div class="col-sm-10 col-xs-10">
      <div class="row">
        <div class="col-sm-12 col-xs-12">
          <a href="#" class="pull-right top_link">Nav-A-1</a>
          <a href="#" class="pull-right top_link">Nav-A-2</a>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12 col-xs-12">
          <nav class="navbar navbar-default">
            <div class="container-fluid">
              <!-- Brand and toggle get grouped for better mobile display -->
              <div class="navbar-header ">
                <button type="button" class="navbar-toggle collapsed pull-left" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" 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>
              </div>
              <!-- Collect the nav links, forms, and other content for toggling -->
              <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                  <li class="active"><a href="#">Nav-B-1<span class="sr-only">(current)</span></a></li>
                  <li><a href="#">Nav-B-2</a></li>
                  <li><a href="#">Nav-B-3</a></li>
                  <li><a href="#">Nav-B-4</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                  <li><a href="#">Form-Right</a></li>
                </ul>
              </div>
              <!-- /.navbar-collapse -->
            </div>
            <!-- /.container-fluid -->
          </nav>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

【讨论】：

【解决方案2】：

您基本上可以使用两个导航栏，然后为您的图像使用position: absolute。您可能会使用网格，但您的折叠菜单在移动设备上很可能不会是全角的。

工作示例：

.navbar-inverse.nav-upper {
  height: 50px;
}
.navbar-inverse.nav-upper ul {
  float: right;
  display: table;
}
.navbar-inverse.nav-upper .navbar-upper > li {
  display: table-cell;
  font-size: 14px;
}
.navbar-inverse.nav-upper .navbar-upper > li > a {
  color: #777;
}
@media (min-width: 768px) {
  .navbar.navbar-lower .navbar-nav {
    margin-left: 100px;
  }
}
.navbar-logo {
  background-image: url('https://lh3.googleusercontent.com/-tw5LsU4Fg28/Umo6BBcoCnI/AAAAAAAAmjE/1iqULsem06E/w896-h896/heisencat.png');
  width: 90px;
  height: 90px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: absolute;
  top: 5px;
  left: 15px;
  z-index: 1051;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<a class="navbar-logo" href="#"></a>

<nav class="navbar-inverse nav-upper">
  <div class="container-fluid">
    <ul class="nav navbar-upper">
      <li><a href="#">NAV-A-1</a>
      </li>
      <li><a href="#">NAV-A-2</a>
      </li>
    </ul>
  </div>
</nav>

<nav class="navbar navbar-inverse navbar-static-top navbar-lower">
  <div class="container-fluid">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" 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>
    </div>

    <div class="collapse navbar-collapse" id="navbar">
      <ul class="nav navbar-nav">
        <li><a href="#">NAV-B-1</a>
        </li>
        <li><a href="#">NAV-B-2</a>
        </li>
        <li><a href="#">NAV-B-3</a>
        </li>
        <li><a href="#">NAV-B-4</a>
        </li>
      </ul>
      <form class="navbar-form navbar-right" role="search">
        <div class="form-group">
          <div class="input-group">
            <input type="text" class="form-control" placeholder="Search">
            <span class="input-group-btn">
              <button type="submit" class="btn btn-default">Submit</button>
            </span>
          </div>
        </div>
      </form>
    </div>
  </div>
</nav>

【讨论】：

如何使用 navbar-fixed-top 达到同样的效果？？

【解决方案3】：

试试这个。在 SM+ 屏幕尺寸上，两行都是可见的。在 XS 屏幕尺寸上，第二行折叠并显示要在右侧打开的图标栏。

.navbar-default.nav-top ul {
  display: inline-block;
  float: right;
}
.navbar-default ul.navbar-top li {
  float: left;
  font-size: 11px;
}
.navbar-brand {
  margin: -40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar-default nav-top">
  <div class="container-fluid">
    <ul class="nav navbar-top" >
      <li><a href="#">Nav-A-1</a>

      </li>
      <li><a href="#">Nav-A-2</a>

      </li>
      <li><a href="#">.....</a>

      </li>
    </ul>
  </div>
</nav>
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" 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="#">
        <img src="http://placehold.it/100x50/f00/f00">
      </a>

    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav " style="margin-left:150px;">
        <li class="active"><a href="#">Nav-B-1<span class="sr-only">(current)</span></a>

        </li>
        <li><a href="#">Nav-B-2</a>

        </li>
        <li><a href="#">Nav-B-3</a>

        </li>
      </ul>
    </div>
  </div>
</nav>

【讨论】：

不知道为什么有人给你-1，但我很感激你的回答，它接近我需要的。我只需要弄清楚为什么折叠菜单没有向左对齐。
在引导程序中，navbar-toggle 类默认右对齐。如果想左对齐，我们重写 css
下方的导航栏怎么会比顶部的厚？我尝试减少 font-size 并删除导航栏切换按钮，但下方导航栏仍然比顶部厚。