bootstrapのdivコンテナ内で、あるテキストを左寄せに、別のテキストを右寄せにする一般的な方法は何でしょうか?
例えば、以下のようなものがあります。
Total cost $42
上記の総コストは左寄せのテキストで、$42は右寄せのテキストにします。
2018年のアップデート...
ブートストラップ4.1+を採用しました。
pull-right
は float-right
になりました。text-right
は 3.x と同じで、インライン要素にも対応しています。と
text-はどちらも [responsive](http://v4-alpha.getbootstrap.com/utilities/responsive-helpers/#responsive-floats) で、異なる幅で異なる配置が可能です (例:
float-sm-right`)。フレックスボックスのユーティリティー(例:justify-content-between
)もアライメントに使用できます。
<div class="d-flex justify-content-between">
<div>
left
</div>
<div>
right
</div>
</div>
また、フレックスボックスコンテナ(行、ナビバー、カード、d-flexなど)のオートマージン(例:ml-auto
)にも使用できます。
<div class="d-flex">
<div>
left
</div>
<div class="ml-auto">
right
</div>
</div>
Bootstrap 4 Align Demo
Bootstrap 4 Right Align Examples(float, flexbox, text-right, etc...)
Bootstrap 3の場合
pull-right`のクラスを使う。
<div class="container">
<div class="row">
<div class="col-md-6">Total cost</div>
<div class="col-md-6"><span class="pull-right">$42</span></div>
</div>
</div>
また、以下のように text-right
クラスを使用することもできます。
<div class="row">
<div class="col-md-6">Total cost</div>
<div class="col-md-6 text-right">$42</div>
</div>
なぜなら、pull-right
ではページのサイズを変更する際に問題が生じることがあるからです。
<div class="row">
<div class="col-xs-6 col-sm-4">Total cost</div>
<div class="col-xs-6 col-sm-4"></div>
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-4">$42</div>
</div>
これで問題なく動作します。