Bootstrap CSS拉右鍵問題

Question

我有一段非常簡單的代碼，我試圖去工作，它給我的問題。

我有一個9和3的網格設置。 9是工具標題，3是工具狀態。

但是，在下面的代碼中，儘管我使用pull-right將內容置於col-md-3的右側，但其內容並未像我預期的那樣與右側對齊。

這裏是一個小提琴：https://jsfiddle.net/p5yctnw0/2/

<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-md-9"> 
     <h1 class="toolTitle">Tool Title <small class="toolSubTitle">#244</small></h1> 
    </div> 
    <div class="col-md-3"><span class="pull-right"><h4>Active</h4>(dates & replacement if applicable)</span></div> 
    </div> 
</div> 

我期望：

我知道這將是一個愚蠢的CSS屬性，我的思念，但不知道還有什麼嘗試。

Answer 1

內容與右側對齊，但文本未對齊。使用text-right css類將文本右對齊。

<span class="pull-right text-right"> 
    <h4>Active</h4> 
    (dates & replacement if applicable) 
</span> 

Answer 2

您可以使用讓文本向右：

.col-md-3 {text-align:right} 

https://jsfiddle.net/p5yctnw0/5/

Answer 3

https://jsfiddle.net/p5yctnw0/3/

使用類text-right，當涉及到文本。 pull-right是爲divs。

Answer 4

看起來像它拉右的權利，但跨度仍然左div對齊。 將div分成2個跨度，每行一個。

<div class="col-md-3"> 
 
    <span class="pull-right"> 
 
    <h4>Active</h4> 
 
    </span> 
 
    <span class="pull-right">(dates & replacement if applicable)</span> 
 
</div>

Answer 5

你正在尋找基本上什麼是text-align:right。用它來獲得你想要的輸出。如果您希望將跨度和尾部文本都拉到正確的位置，請使用@ van-tuan-pham的答案。或者僅用於跨度。

但不要覆蓋引導程序類。而是使用自己的類或ID選擇器來設置CSS屬性。

Answer 6

根本不喜歡這種方式

.alignment { 
 
\t text-align:right; 
 
} 
 
.alignment span { 
 
\t display:block; 
 
\t font-size:13px; 
 
}

<div class="container-fluid"> 
 
    <div class="row"> 
 
    <div class="col-md-9"> 
 
     <h1 class="toolTitle">Tool Title <small class="toolSubTitle">#244</small></h1> 
 
    </div> 
 
    <div class="col-md-3 alignment"> 
 
    \t <h4>Active <span>(dates & replacement if applicable)</span></h4> 
 
    </div> 
 
    </div> 
 
</div>

Answer 7

代替行格與下面的代碼：

<div class="row"> 
    <div class="col-md-9"> 
     <h1 class="toolTitle">Tool Title <small class="toolSubTitle">#244</small></h1> 
    </div> 
    <div class="col-md-3 text-right" ><span><h4>Active</h4>(dates & replacement if applicable)</span></div> 
    </div>