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

Question

我有一些带有包含文本和/或按钮的标题的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上要好得多。

Answer 1

您无法将图标居中的原因是因为它们具有使其浮动的css属性;

为图标添加一个类，例如＆＃39; no-float＆＃39;然后将此添加到您的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">

Answer 2

你的意思是这样吗？

http://jsfiddle.net/aoyss2Lm/6/

我将引导类“仅文本”添加到<li>