在对 Twitter 的 Bootstrap 进行一些实验时,我正在尝试制作一个导航栏,左侧是品牌,旁边是折叠菜单,最后是右侧的一组不展开的图标。
这是一个 diddly'fiddle :
还有问题的部分:
<!-- Non-collapsing right-side icons -->
<div class="navbar-header navbar-right pull-right">
<ul class="nav pull-right">
<li class="pull-right"><a href="#">
<img style="max-width:32; vertical-align:middle;" src="img/icon1.png">
</a></li>
<li class="pull-right"><a href="#">
<img style="max-width:32; vertical-align:middle;" src="img/icon2.png">
</a></li>
</ul>
</div> <!--/.navbar-right -->
正如你在 fiddle 中看到的,当菜单折叠时,就可以了。但是当窗口大到足以让菜单展开时,图标会向左移动(在品牌和菜单之间)。
我还尝试将非折叠图标放在 navbar-header 之外:在这种情况下,展开的导航栏没问题,但折叠的版本变得错误(图标在不同的行中)。
预先感谢您的帮助。
最佳答案
您需要以不同方式构建 html,使用要在导航栏上使用的类(导航栏中不使用向右拉和向左拉)并编写自定义 css。
演示:http://jsbin.com/humoye/1/
代码:http://jsbin.com/humoye/1/edit
尽量不要使用内联样式,并确保使用正确的语法,尽可能使用字体而不是图形,因为视网膜设备上的光栅图像看起来会很模糊,除非您加载双倍大小并缩小尺寸在 css 中(或其他几种方式)。
CSS
/* icon */ .custom-navbar .fa {font-size:25px}
@media (max-width:767px) {
.custom-navbar .navbar-right {
float: right;
padding-right: 15px;
}
.custom-navbar .nav.navbar-nav.navbar-right li {
float: right;
}
.custom-navbar .nav.navbar-nav.navbar-right li > a {
padding:8px 5px;
}
.custom-navbar .navbar-toggle {
float: left
}
.custom-navbar .navbar-header {
float: left;
width: auto!important;
}
.custom-navbar .navbar-collapse {
clear: both;
float: none;
}
}
HTML
<nav class="navbar navbar-inverse navbar-static-top custom-navbar" role="navigation">
<div class="container">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-header">
<a class="navbar-brand" rel="home" href="#" title="Help">
Help ?
</a>
</div>
<!-- Non-collapsing right-side icons -->
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#" class="fa fa-cog"></a>
</li>
<li>
<a href="#" class="fa fa-home"></a>
</li>
</ul>
<!-- the collapsing menu -->
<div class="collapse navbar-collapse navbar-left" id="navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container -->
</nav>
关于jquery - Bootstrap 导航栏右侧的图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26043002/