More than 5 years have passed since last update.

BootstrapのFlex Layoutを使った、コンポーネント(2つ)を左右に配置する方法

Last updated at 2019-08-23Posted at 2019-08-22

やりたかったこと

下図のような感じで画面の両端にコンポーネントを配置したいなあと思っていました。

左側に配置したいコンポーネントのクラスにmr-autoを追加しました。

コード

pug

  b-container
    b-row
      b-col.mr-auto(cols="auto")
        div タイトル
      b-col(cols="auto")
        b-button.download ボタン

このクラスが追加された要素の右側のマージンを、右側のコンポーネントまで詰めることができます。
↓こんな感じ↓

CSSのfloatプロパティでできると思っていたのですが、flexではできない？

右側のコンポーネントのcolsだけをautoにしてもできるけど、ちゃんとやりたいならマージンを使った方がいいのかなあと思います。