Как центрировать/оправдывать текст/иконку в загрузочном заголовке Bootstrap?

Question

У меня есть мобильные страницы jQuery с заголовком, содержащим текст и/или кнопки. Иногда есть центрированный текст, другие просто переполнены кнопками. Существует несколько размеров экрана и/или количество кнопок.

Как скопировать это в Bootstrap разрушилась NavBar-заголовок? Я создал этот образец 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, что делает их плавать прямо;

добавить класс к пиктограммам, например «нет-поплавка», то добавьте в ваш 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>