我有一些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/

10-11 23:25
查看更多