我有一些jQuery移动页面,其标题包含文本和/或按钮。有时会有居中的文本,其他的只是挤满了按钮。有几种屏幕尺寸和/或按钮数量。
如何在Bootstrap折叠的navbar-header中重复此操作?我创建了这个jsfiddle示例,但无法弄清楚如何居中/对齐文本和按钮。
Jsfiddle Sample
<div class="navbar-header">
<!-- button left -->
<a type="button" class="navbar-toggle collapsed pull-left navbar-icon" data-toggle="collapse" data-target="#navbar">
<i class="fa fa-bars fa-2x"></i>
</a>
<!-- button right --->
<a class="navbar-toggle collapsed navbar-icon" data-toggle="collapse">
<i class="fa fa-edit fa-2x"></i>
</a>
<!-- in the middle -->
<div style="text-align:center">
<a class="navbar-toggle collapsed navbar-icon" data-toggle="collaplse">
<i class="fa fa-reply fa-2x"></i>
</a>
<a class="navbar-toggle collapsed navbar-icon" data-toggle="collaplse">
<i class="fa fa-foward fa-2x"></i>
</a>
<a class="navbar-toggle collapsed navbar-icon" data-toggle="collaplse">
Some Text
</a>
</div>
</div>
<style>
body {
padding-top: 60px;
}
.navbar-header .navbar-icon {
line-height:30px;
height:30px;
border:0;
}
.navbar-header a.navbar-icon {
padding:0 0px;
}
</style>
我能找到的最接近答案是previous discussion。在这里尝试了答案,没有用。
任何提示我想念的吗?谢谢
更新:Final version根据建议。可能与自定义引导程序有关,我的本地版本看起来比jsfiddle更好。
最佳答案
您之所以无法居中放置图标,是因为它们具有css属性,可以使它们向右浮动。
在图标上添加一个类,例如“ no-float”,然后将其添加到您的css.no-float { float:none!important; }
这将使其工作
所以这<a class="navbar-toggle collapsed navbar-icon" data-toggle="collaplse">
变成这个<a class="no-float navbar-toggle collapsed navbar-icon" data-toggle="collaplse">
关于css - 如何在Bootstrap折叠标题中居中/对齐文本/图标按钮?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/27931756/