css - 如何在 Bootstrap 折叠标题中居中/对齐文本/图标按钮？

Question

我有一些标题包含文本和/或按钮的 jQuery 移动页面。有时有居中的文本，其他的只是挤满了按钮。有多种屏幕尺寸和/或按钮数量。

如何在 Bootstrap 折叠的导航栏标题中复制它？我创建了这个 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根据建议。可能与自定义 Bootstrap 有关，我的本地版本看起来比 jsfiddle 上的好多了。

Answer 1

你不能让你的图标居中的原因是因为它们有一个 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">