带有两行的 Bootstrap 导航栏 [英] Bootstrap navbar with two rows

查看：25
本文介绍了带有两行的 Bootstrap 导航栏的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

SM+

+--------------------------------------------------------------------------------+||导航-A-1 导航-A-2 ||网站标志|--------------------------------------------------------------+||Nav-B-1 Nav-B-2 Nav-B-3 Nav-B-4 Form-Right |+-------------------------------------------------------------------------------+

XS

+--------------------------------------------------------------------------------+||导航-A-1 导航-A-2 ||网站标志|--------------------------------------------------------------+||导航折叠的汉堡包 |+-------------------------------------------------------------------------------+

如何使用导航栏完成此操作?

解决方案

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

工作示例:

.navbar-inverse.nav-upper {高度:50px；}.navbar-inverse.nav-upper ul {浮动:对；显示:表；}.navbar-inverse.nav-upper .navbar-upper >李{显示:表格单元格；字体大小:14px；}.navbar-inverse.nav-upper .navbar-upper >立>一种 {颜色:#777；}@media(最小宽度:768px){.navbar.navbar-lower .navbar-nav {左边距:100px；}}.navbar-logo {背景图片:url('https://lh3.googleusercontent.com/-tw5LsU4Fg28/Umo6BBcoCnI/AAAAAAAAmjE/1iqULsem06E/w896-h896/heisencat.png');宽度:90px；高度:90px；背景尺寸:封面；背景位置:居中；背景重复:不重复；位置:绝对；顶部:5px；左:15px；z-索引:1051；}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="样式表"/><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><a href="#">NAV-A-2</a>

</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">切换导航</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>

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

</表单>

</nav>

I am wanting to have a Bootstrap 3 navbar that has two rows with navigation elements, and with navbar-brand spanning both rows. On SM+ screen sizes both rows are visible. On XS screen sizes the second row collapses and shows the icon-bar to open.

SM+

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

XS

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

How could this be done with the navbar?

解决方案

You can essentially use two navbars and then use position: absolute for your image. You could potentially use the grid but your collapse menu won't be full-width on mobile most likely then.

Working Example:

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

这篇关于带有两行的 Bootstrap 导航栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆