ブートストラップのdiv内で左揃えと右揃え

268

ブートストラップのdivコンテナー内で一部のテキストを左揃えにし、その他のテキストを右揃えする一般的な方法は何ですか？

例えば

Total cost                   $42

合計費用より上は左揃えのテキストで、42ドルは右揃えのテキストです

twitter-bootstrap user-interface bootstrap-4

— ユーザー462455
ソース

611

2018アップデート...

ブートストラップ4.1以降

pull-right 今です float-right
text-right 3.xと同じで、インライン要素に対して機能します
両方float-*とtext-*されている応答性の異なる幅の異なる位置合わせのため（例：float-sm-right）

flexbox utils（例：）justify-content-betweenは位置合わせにも使用できます。

<div class="d-flex justify-content-between">
      <div>
         left
      </div>
      <div>
         right
      </div>
 </div>

または、ml-auto任意のフレックスボックスコンテナ（行、ナビゲーションバー、カード、d-フレックスなど）の自動マージン（例：）

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

ブートストラップ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>

ブートストラップ3デモ

次のtext-rightようなクラスを使用することもできます。

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

ブートストラップ3デモ2

— ジム
ソース

2

Bootstrap 3については、コラムについてtext-rightは、私のために働いた。

— FlorinVîrdol18年

60

pull-rightクラスを使用する代わりtext-rightに、列でクラスを使用するpull-rightことをお勧めします。ページのサイズ変更中に問題が発生する場合があるためです。

— アルン・アガルワル
ソース

17

~~Bootstrap 4では、正しい答えはtext-xs-rightクラスを使用することです。~~

これxsは、BSで最小のビューポートサイズを示すため機能します。必要に応じて、を使用してビューポートが中程度以上の場合にのみ配置を適用できますtext-md-right。

最新のアルファでtext-xs-rightは、に簡略化されていtext-rightます。

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

— エリック・バークン・ドレヴニグ
ソース

11

Bootstrap v4がflexboxサポートを導入

<div class="d-flex justify-content-end">
  <div class="mr-auto p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

詳しくはhttps://v4-alpha.getbootstrap.com/utilities/flexbox/をご覧ください

— ウィリアム・エントリケン
ソース

6

Bootstrap 4 Flexboxで実現できます。

<div class="d-flex justify-content-between w-100">
<p>TotalCost</p> <p>$42</p>
</div>

d-flex // Display Flex
justify-content-between // justify-content:space-between
w-100 // width:100%

例：JSFiddle

— プラディープ・クマール
ソース

1

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

それで大丈夫です

— テリーマイト
ソース