[英]Bootstrap 3 Navbar Collapse menu at Left for left and right navbar items
I have a Bootstrap 3 navbar with left nav items and right nav items (as shown below). 我有一个带有左侧导航项和右侧导航项的Bootstrap 3导航栏(如下所示)。
When collapsed, I want both the navbar-toggle (AKA the 'hamburger menu') and its items to be left aligned. 折叠后,我希望导航栏切换(又称“汉堡菜单”)及其项目保持对齐。
My code so far: 到目前为止,我的代码:
<nav class="navbar navbar-default custom-navbar" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#">Left</a></li>
<li><a href="#about">Left</a></li>
</ul>
<ul class="nav navbar-nav pull-right">
<li><a href="#about">Right</a></li>
<li><a href="#contact">Right</a></li>
</ul>
</div>
</nav>
The CSS to have the navbar-toggle on the left is: 在左侧具有navbar-toggle的CSS是:
@media (max-width:767px) {
.custom-navbar .navbar-right {
float: right;
padding-right: 15px;
}
.custom-navbar .nav.navbar-nav.navbar-right li {
float: left;
}
.custom-navbar .nav.navbar-nav.navbar-right li > a {
padding:8px 5px;
}
.custom-navbar .navbar-toggle {
float: left;
margin-right: 0
}
.custom-navbar .navbar-header {
float: left;
width: auto!important;
}
.custom-navbar .navbar-collapse {
clear: both;
float: none;
}
}
I have added a "pull-right" style to have the items aligned, with no success. 我添加了“向右拉”样式以使项目对齐,但没有成功。
The "navbar-right" works badly. “导航栏右”效果很差。 In fact, with it, I will have both right-hand items on the same row.
实际上,有了它,我将在同一行中同时包含两个右侧项目。 Using "pull-right" they work as single rows, but still stay on the right.
使用“向右拉”,它们可以作为单行工作,但仍保持在右边。
This leaves me with: 这给我留下了:
The final result: 最终结果:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.