在Bootstrap 3中的折叠导航栏中显示图标 [英] Show icons in the collapsed navbar in Bootstrap 3
问题描述
我想建立一个bootstrap 3 navbar像Facebook应用程序,有一些图标。
问题是,当它的折叠条,所有的图标都被隐藏。如果我把图标放在< div class =collapse navbar-collapse>
之外,图标不在隐藏,但 ; ul>< li>
doen't工作,垂直放置我的图标。
如果可能,中心:
p>
这些都是!感谢朋友;)
EDIT1:
HTML代码 b
$ b
< div class =navbar navbar-default navbar-fixed-top>
< div class =navbar-header>< a class =navbar-brandhref =#> 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-toggledata-toggle =collapsedata-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 =#>首页< / a>< / li&
< li>< a href =#>链接< / a>< / li&
< li>< a href =#>更多< / a>< / li&
< li>< a href =#>选项< / 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;
}
此示例正在运行。
在移动版本中,我们需要知道您的图标位于带有 text-align:center
的div中,并删除图标左侧的浮点。
I want to build a bootstrap 3 navbar like the facebook app, with some icons.
The problem is that when the bar its collapsed, all the icons are hidden. If I put the icons outside from <div class="collapse navbar-collapse">
the icons are out and not hidden, but the <ul><li>
doen't work and put my icons vertically.
If its possible I want also to align the icons in the center:
Thats all! Thanks friends ;)
EDIT1:
HTML Code
<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 Code
.navbar-header .navbar-icon {
line-height:50px;
height:50px;
}
.navbar-header a.navbar-icon {
padding:0 10px;
float:left;
}
This example is working now. I need to know hw can I align in the center the icons in the mobile responsive version.
In the mobile version, wrap your icons in a div with style text-align:center
and remove the float left of your icons.
这篇关于在Bootstrap 3中的折叠导航栏中显示图标的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!