對齊中心對齊的右引導網格

我正在使用引導網格系統。我有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的樣子：

.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幫助，但是當我切換到移動模式時，bootstrap使列中的網格和第三個網格變爲右對齊（其他兩個居中）。所以我需要第三個網格將右對齊，但在具有中心對齊的父網格內。可能嗎？

來源

2016-11-13 Aleksandr A

這是更好地提供真正的代碼，而不是未關閉標籤的堆塊。 – Banzay

它看起來像你需要添加'COL-sm'和'COL-xs'規則了。 –

@Banzay謝謝，我已經更新了它。 –

答：

我已經分居兩個<ul class = "list">對象列，並添加

display: inline-block; 
*display: inline;

屬性列表類。

來源

2016-11-14 11:30:26

刪除text-align-last: right;財產，因爲它不影響a標籤li內。使用.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; 
}

來源

2016-11-14 02:43:36

沒有什麼變化。它確實改變了例如顏色，但似乎繼承父居中對齊。 –

沒有什麼變化 .LIST李：第n個孩子（N）{ 文本對齊：權利; } 移動n個要素向右類似於 .LIST { 文本對齊倒數：右; } –

嘗試pull-right類添加到那些你想右

來源

2016-11-14 02:48:37

對齊中心對齊的右引導網格

回答

相關問題