center unordered list navbar - bootstrap 3

Question

これで、ナビゲーションバーのリストアイテムを中央に配置しようとしています。この作業にはユーティリティ関数がないので、行内の列に順序付けられていないリストを配置する次のコードを考案しました。しかし、リストはまだ私が古いと中心にしてみてくださいした後も左に正当化される「テキスト整列：センター」

<div class="navbar navbar-fixed-top "> 
    <!--<a class="navbar-brand" href="#">Title</a> --> 
    <div class= "row"> 
     <div style="border:1px solid black;text-align:center;" class="col-4 col-offset-4"> 
      <ul class="nav navbar-nav"> 
       <li class="active"><a href="/">Home</a></li> 
       <li><a href="#">About</a></li> 
       <li><a href="#">Projects</a></li> 
       <li><a href="#">Contact</a></li> 
      </ul> 
     </div> 
    </div> 
</div> 

Answer 1

私は自分自身でこれを理解することができました。

 <div class="navbar navbar-fixed-top">     
        <div style="border:1px solid black" class="container"> 
      <div class="inner-nav"> 
       <!--<a href="#" class="navbar-brand">Title</a> --> 
       <ul class="nav navbar-nav"> 
        <li class="active"><a href="/" >Home</a></li> 
        <li><a href="#" >About</a></li> 
        <li><a href="#" >Projects</a></li> 
        <li><a href="#" >contact</a></li> 
       </ul> 
      </div> 
        </div>     
      </div> 

私はその後、bootstrap.cssするには、以下のスタイルを追加しました：：

/* ADDED for centering navbar items */ 
.navbar .inner-nav ul { 
position:relative;left:50%;float:left;margin-right:0;margin-left:0; 
} 

/* ADDED for centering navbar items */ 
.navbar .inner-nav li { 
position:relative;right:50%;float:left;margin:0;list-style:none 
} 

Answer 2

ここで私は昨日のコードがあり、ブートストラップ3 RC1で正常に動作します。これがあなたを助けることを願っています。

   <nav class="navbar navbar-fixed-top">     
         <div class="container">       
          <a href="#" class="navbar-brand">Title</a> 
          <ul class="nav navbar-nav"> 
           <li class="active"><a href="#" >Home</a></li> 
           <li><a href="#" >Services</a></li> 
          </ul>                   
         </div>     
       </nav>    

問題がまだある場合は教えてください。

編集：削除不要なマークアップ

Answer 3

手順私は取った：それは最善の解決策だったかどうかわからない

• リスト、リストからfloat: leftを削除します要素
• リスト要素の代わりにdisplay: inlineを使用してください。
• display: inline-blockに設定したリンクは、そう、彼らは携帯電話上でメディアクエリーので、垂直リスト内のすべて
• ラップを中心にナビゲーションバーにtext-align: centerを追加するだけで
• そのブロックの大きさを保つ.navbar-centeredスタイルを追加するCSSを結果として生じる

影響を受けません。

ナビゲーションバーする .navbar-centeredスタイルを適用することにより、

@media (min-width: 768px) { 
    .navbar-centered .navbar-nav { 
     float: none; 
     text-align: center; 
    } 
    .navbar-centered .navbar-nav > li { 
     float: none; 
    } 
    .navbar-centered .nav > li { 
     display: inline; 
    } 
    .navbar-centered .nav > li > a { 
     display: inline-block; 
    } 
} 

用途：

<div class="navbar navbar-default navbar-centered" role="navigation"> 
    ... 
</div>