ブートストラップCSS Pull-Rightの問題

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はdiv用です。

Answer 4

divを右に引っ張るように見えますが、スパンはdiv内で一直線に並んでいます。 divを2つのスパンに分割します（各行に1つずつ）。あなたが探している基本的にはどのような

Answer 5

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

は 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あなたのコードを置き換えます：

<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> 

を