Bootstrapのナビゲーションバーに項目を配置する方法

Question

私は最善を尽くしましたが、残念ながらNavbarの中央にText Center 1と2の要素を配置することができません。あなたが私を助けてくれることを願っています。ありがとう。

<div class="navbar navbar-default navbar-bottom" role="navigation"> 
 
    <div class="container"> 
 
    <div class="navbar-text pull-left"> 
 
     <p>Left</p> 
 
    </div> 
 
    <div class="navbar-text ???"> 
 
     <a href="#"><i>Text Center 1</i></a> 
 
     <a href="#"><i>Text Center 2</i></a> 
 
    </div> 
 
    <div class="navbar-text pull-right"> 
 
     <a href="#"><i class="fa fa-facebook-square fa-2x"></i></a> 
 
     <a href="#"><i class="fa fa-twitter fa-2x"></i></a> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

ちょうどあなたがtext-align:CENTER;プロパティをセンタリングしたいのdivを与えます。

ブートストラップの代わりにプレーンなCSSを使用するほうが簡単かもしれません。

div.center{ 
 
    text-align:CENTER; 
 
}

<div class="navbar navbar-default navbar-bottom" role="navigation"> 
 
    <div class="container"> 
 
\t <div class="navbar-text pull-left"> 
 
     <p>Left</p> 
 
\t </div> 
 
\t <div class="navbar-text center"> 
 
\t <a href="#"><i>Text Center 1</i></a> 
 
\t <a href="#"><i>Text Center 2</i></a> 
 
\t </div> 
 
\t <div class="navbar-text pull-right"> 
 
\t <a href="#"><i class="fa fa-facebook-square fa-2x"></i></a> 
 
\t <a href="#"><i class="fa fa-twitter fa-2x"></i></a> 
 
\t </div> 
 
    </div> 
 
</div>

Answer 2

ブートストラップは、あなたが/ divの任意の要素に追加できる定義済みの中心にテキストクラスtext-centerを持っています。

例：<div class="navbar-text text-center">

見るここにすべてのブートストラップアライメントクラス：http://getbootstrap.com/css/#type-alignment

Answer 3

クラスtext-center画面サイズは768px少ないし（しかし、社会的なリンクが倒れ、この場合にのみText Centerリンクを中央にあなたを助けます！ ）、screen-sizeが768pxより大きい場合、ブートストラップのクラスnavbar-textのプロパティはfloat: leftであり、リンクはナビゲーションバーの左側に表示されます。その動作を防ぐために、あなたは中央のナビゲーションバーのためfloat: noneとdisplay: inline-blockプロパティを適用する必要があります。

<div class="navbar navbar-default navbar-bottom" role="navigation"> 
    <div class="container text-center"> 
    <div class="navbar-text pull-left"> 
     <p>Left</p> 
    </div> 
    <div class="navbar-text myClass"> 
     <a href="#"><i>Text Center 1</i></a> 
     <a href="#"><i>Text Center 2</i></a> 
    </div> 
    <div class="navbar-text pull-right"> 
     <a href="#"><i class="fa fa-facebook-square fa-2x"></i></a> 
     <a href="#"><i class="fa fa-twitter fa-2x"></i></a> 
    </div> 
    </div> 
</div> 

.myClass { 
    float: none; 
    display: inline-block; 
} 

クラスtext-centerを、この場合にはdiv.container

JSFiddle-example