Bootstrapでのdiv内の左寄せと右寄せ

bootstrapのdivコンテナ内で、あるテキストを左寄せに、別のテキストを右寄せにする一般的な方法は何でしょうか？

例えば、以下のようなものがあります。

Total cost                   $42

上記の総コストは左寄せのテキストで、$42は右寄せのテキストにします。

Zim
編集された質問 23日 10月 2018 в 2:58
プログラミング
user-interface twitter-bootstrap bootstrap-4
7日 9月 2013 в 10:40
17 ビュー
ソリューション

2018年のアップデート...

ブートストラップ4.1+を採用しました。

  • pull-right は float-right になりました。
  • text-right は 3.x と同じで、インライン要素にも対応しています。
  • float-と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>

Bootstrap 3 デモ

また、以下のように text-right クラスを使用することもできます。

  <div class="row">
    <div class="col-md-6">Total cost</div>
    <div class="col-md-6 text-right">$42</div>
  </div>

Bootstrap 3 Demo 2

Zim
編集した答え 17日 8月 2018 в 12:03
解説 (2)

なぜなら、pull-rightではページのサイズを変更する際に問題が生じることがあるからです。

Gargaroz
編集した答え 22日 6月 2015 в 2:44
解説 (0)
 
<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>

これで問題なく動作します。

Mosh Feu
編集した答え 3日 5月 2016 в 7:32
解説 (0)