1. ホーム
  2. twitter-bootstrap

[解決済み] Bootstrapのcolは右寄せ

2022-05-13 16:28:21

質問

2つのコルを持つ行を作成しようとしています。1つのコルは左側にあり、その内容は左側に配置され、2番目のコルはその内容が右側に配置されています(古いプル-ライト)。

α6でこれを行うにはどうしたらよいでしょうか?

いくつか試してみましたが、今のところこんな感じです。何が足りないのでしょうか?

<div class="row">
    <div class="col">left</div>
    <div class="col ml-auto">content needs to be right aligned</div>
</div>

どのように解決するのですか?

Bootstrap 5 (2021年アップデート)

Bootstrap 5で要素を右寄せにするには...

float-right は現在 float-end

text-right は現在 text-end

ml-auto は現在 ms-auto

Bootstrap 4 (オリジナルの回答)

使用方法 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://codeply.com/go/oPTBdCw1JV

もし float-right が動作しない場合。 を覚えておいてください。 Bootstrap4はflexboxになりました。 になっており、多くの要素が display:flex を防ぐことができます。 float-right が機能するのを妨げます。

場合によっては、ユーティリティクラスのような align-self-end または ml-auto は、Bootstrap 4 の .row や Card、Nav などのフレックスボックス コンテナ内にある要素を右寄せにするために使用します。そのため ml-auto (margin-left:auto) は、フレックスボックス要素内で要素を右へ押し出すために使用されます。

Bootstrap 4のalign rightの例