中央に位置合わせされた正しいブートストラップグリッド

Question

私はブートストラップグリッドシステムを使用しています。 私は、中心を揃え3つのグリッドがあります。

<div id="jumbotron"> 
    <div class="container"> 
     <div class="row row-centered"> 
      <div class="col-md-4 col-centered"> 
       <p> 
        Logo 
       </p> 
      </div> 
      <div class="col-md-4 col-centered"> 
       <h3> 
        Some text 
       <h3> 
      </div> 
      <div class="col-md-4 col-centered"> 
       <ul class="list"> 
         <li> 
          <img src="img_url"/> 

          <a class="phones" href="+1-380-555-5555">+13805555555</a> 
         </li> 
         <li> 
          <img src="img_url"/> 

          <a class="phones" href="+1-380-555-5555">+13805555555</a> 
         </li> 
         <li> 
          <img src="img_url"/> 

          <a class="phones" href="+1-380-555-5555">+13805555555</a> 
         </li> 
       </ul> 
      </div> 
     </div> 
    </div> 
</div> 

をし、CSSは次のようになります。私は右詰めさにしたい持っている第3グリッドで

.row-centered { 
    text-align: center; 
} 

.list { 
    text-decoration: none; 
    color: #f1f0e9; 
    font-size: 20px; 
    font-family: 'Trirong', serif; 
    list-style-type: none; 
    text-align-last: right; 
} 

。 text-align：rightは役に立ちますが、モバイルモードに切り替えると、列と第3グリッドのグリッドが右揃えになります（他の2つは中央揃えになります）。 だから、私は3番目のグリッドが右揃えになる必要がありますが、センターグリッドの内側に親グリッドがあります。出来ますか？

Answer 1

回答：

私は2つの<ul class = "list">オブジェクトの列を分離し、リストクラスに

display: inline-block; 
*display: inline; 

プロパティを追加しています。

Answer 2

のaタグには影響しないため、text-align-last: right;のプロパティを削除します。 .list:last-child aを使用すると、最後のliタグが選択され、そのaタグに影響します。

.row-centered { 
    text-align: center; 
} 

.list { 
    text-decoration: none; 
    color: #f1f0e9; 
    font-size: 20px; 
    font-family: 'Trirong', serif; 
    list-style-type: none; 
    /*text-align-last: right;*/ 
} 

.list li:last-child a{ 
    text-align: right; 
} 

Answer 3

あなたが望むものにpull-rightクラスを追加してみ右