带有两行的 Bootstrap 导航栏 [英] Bootstrap navbar with two rows
问题描述
我想要一个 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>
</表单>