我想要一个Bootstrap 3导航栏,它有两行导航元素,并且navbar-brand跨越两行.在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 | +-------------------------------------------------------------------------------+
XS
+-------------------------------------------------------------------------------+ | | Nav-A-1 Nav-A-2 | | SITE logo |---------------------------------------------------------------+ | | Nav-Collapsed Hamburger | +-------------------------------------------------------------------------------+
怎么可以用导航栏完成？
解决方法
您基本上可以使用两个导航栏,然后使用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>