web-dev-qa-db-ja.com

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

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

例えば.

Total cost                   $42

合計コストを超える場合は、テキストを左揃えにし、42ドルを右揃えにします

twitter-bootstrapuser-interfacebootstrap-4
201
user462455

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>

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

<div class="d-flex">
      <div>
         left
      </div>
      <div class="ml-auto">
         right
      </div>
 </div>

Bootstrap 4 Align Demo
ブートストラップ4の右揃えの例 （float、flexbox、text-rightなど）

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

479
Zim

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

48
Arun Agarwal

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>
13
Erik Berkun-Drevnig

ブートストラップ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/ で詳細を見る

9
William Entriken

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

2
pradeep kumar
<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>

これでうまくいくはずです

1
Terrymight