我想建立一个类似于Facebook应用的Bootstrap 3导航栏,并带有一些图标。问题是当导航栏折叠时,所有的图标都被隐藏了。如果我将图标放在
如果可能的话,我也想将图标居中对齐:
这就是全部!谢谢朋友们 ;)
编辑1:
HTML代码
<div class="collapse navbar-collapse">
外面,那么图标就会显示出来而不被隐藏,但是<ul><li>
不起作用并且我的图标会垂直排列。如果可能的话,我也想将图标居中对齐:
这就是全部!谢谢朋友们 ;)
编辑1:
HTML代码
<div class="navbar navbar-default navbar-fixed-top">
<div class="navbar-header"><a class="navbar-brand" href="#">Brand</a>
<a href="#" class="navbar-icon"><span class="glyphicon glyphicon-comment"></span></a>
<a href="#" class="navbar-icon"><span class="glyphicon glyphicon-edit"></span></a>
<a 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>
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">More</a></li>
<li><a href="#">Options</a></li>
</ul>
</div>
</div>
CSS 代码
.navbar-header .navbar-icon {
line-height:50px;
height:50px;
}
.navbar-header a.navbar-icon {
padding:0 10px;
float:left;
}
这个示例现在可以使用。我想知道如何在移动响应版本中将图标居中对齐。