web-dev-qa-db-ja.com

col右揃え

私は2列の行を作成しようとしています。左側の1つの列はその内容が左に揃えられ、2番目の列はその内容が右に揃えられています（古いプルライト）。

Alpha-6でこれを行うにはどうすればよいですか？

私はいくつかのことを試しましたが、これは私がこれまで持っているものです。私は何が欠けていますか？

<div class="row">
    <div class="col">left</div>
    <div class="col ml-auto">content needs to be right aligned</div>
</div>
twitter-bootstrapbootstrap-4
44
Thibs

ブロック要素にはfloat-rightを使用し、インライン要素にはtext-rightを使用します。

<div class="row">
     <div class="col">left</div>
     <div class="col text-right">inline content needs to be right aligned</div>
</div>
<div class="row">
      <div class="col">left</div>
      <div class="col">
          <div class="float-right">element needs to be right aligned</div>
      </div>
</div>

http://www.codeply.com/go/oPTBdCw1JV

float-rightが機能しない場合ブートストラップ4は現在flexboxであり、多くの要素がdisplay:flexであるため、float-rightが機能しない場合があります。

場合によっては、align-self-endやml-autoなどのユーティリティクラスが、flexboxのようなBootstrapコンテナ内にある要素を右揃えするように機能します。 _ 4 .row、CardまたはNav。 ml-auto（margin-left：auto）は、エレメントを右にプッシュするためにflexboxエレメントで使用されます。

Bootstrap 4は右揃えの例

92
Zim

これはどう？ ブートストラップ4

<div class="row justify-content-end">
    <div class="col-3">
        The content is positioned as if there was
        "col-9" classed div appending this one.
    </div>
</div>
9
Bexultan Myrzatayev

Bootstrap 4の場合、次のことが非常に便利であることがわかりました。

  • 右側の列は、必要なスペースを正確に取得し、適切に引き出します
  • 一方、左の列は常に最大のスペースを取得します！.

したがって、col幅を定義する必要はありません（col-2など）。

<div class="row">
    <div class="col">Left</div>
    <div class="col-auto">Right</div>
</div>

単語、アイコン、ボタンなどを右に揃えるのに最適です。

これを小さなデバイスでレスポンシブにする例：

<div class="row">
    <div class="col">Left</div>
    <div class="col-12 col-sm-auto">Right (Left on small)</div>
</div>
4
Julesezaar

ドキュメントから、次のようにします：

<div class="row">
    <div class="col-md-6">left</div>
    <div class="col-md-Push-6">content needs to be right aligned</div>
</div>

ドキュメント

2
Jordan.J.D