center/justify text/icon 按钮在 Bootstrap 中如何折叠 header？

Question

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

如何在 Bootstrap collapsed navbar-header 中复制它？我创建了这个 jsfiddle 示例，但无法弄清楚如何 center/justify 文本和按钮。

<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 属性使它们向右浮动；

将 class 添加到图标中，例如 '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">

Answer 2

你的意思是这样？

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

我将 bootstrap class "text-only" 内联添加到 <li>

center/justify text/icon 按钮在 Bootstrap 中如何折叠 header？

How to center/justify text/icon button in Bootstrap collapsed header?

css

navbar

twitter-bootstrap