niwaka-web

webサイト構築関連のにわか知識集

Bootstrap CSS

【Bootstrap4】グリッドレイアウト(列の自動レイアウト)

投稿日:2018年1月10日 更新日:

Bootstrap4のグリッドレイアウトの説明は長いので列の自動レイアウトは別ページに。
Bootsatrap4からはグリッドシステムにcss3のflexboxが利用されるようになりました。
.col-sm-6のような明示的に番号を付けられたクラスがなければ自動的に幅が設定されます。

基本は【Bootstrap4】グリッドレイアウト基本ページに記載しています。

等幅(Equal-width)

必要なブレークポイントごとに数字の指定のないクラスを追加すると、すべての列が同じ幅で表示されます。

等幅(Equal-width)使用例

2分割列の設定は、.colで指定。最小サイズの指定になるので568px未満でも2列表示になります。
3分割列の設定は、.col-smで指定。568pxでは3列表示になります。
codepenを別ウインドウで開きブラウザの幅を変更しながら確認するとわかりやすいです。

html

<h3>2分割列の設定</h3>
<div class="container">
  <div class="row">
    <div class="col">
      2つの列の1列目<br>.col
    </div>
    <div class="col">
      2つの列の2列目<br>.col
    </div>
  </div>
</div>

<h3>3分割列の設定(sm以上)</h3>
<div class="container">
  <div class="row">
    <div class="col-sm">
      3つの列の1列目<br>.col-sm
    </div>
    <div class="col-sm">
      3つの列の2列目<br>.col-sm
    </div>
    <div class="col-sm">
      3つの列の3列目<br>.col-sm
    </div>
  </div>
</div>

等幅(Equal-width)使用時の注意点

等幅の列は複数の行にも分割可能ですが、Safariの少し古いバージョンではバグがあるようです。バージョン10.1で修正されたようで、最新のものは関係ありませんが少し注意が必要かもです。
下記のページのバグだそうです。
Flexbug #11
日本語だと下記のバグのことかと思います。
flexboxのバグに立ち向かう(flexboxバグまとめ)

Bootstrap4 等幅(Equal-width)複数行分割 使用例

改行させたい部分に<div class="w-100"></div>と空の要素を入れることで複数行の分割を行うようです。空要素なので嫌いな人もいそうですが。。

html

<div class="container">
  <div class="row">
    <div class="col">1列目</div>
    <div class="col">2列目</div>
    <div class="w-100"></div>
    <div class="col">3列目</div>
    <div class="col">4列目</div>
  </div>
</div>

1列の幅の設定(Setting one column width)

1行の中で分割した列で数字を指定したクラスと指定しないクラスが混在した場合は、12-指定した数字の合計=残りの数字を指定しなかった列で等分されます。

例えば1行を3分割(3カラム)にし、真ん中だけ6設定をした場合は12-6=6で残りの6を2つの指定しなかった列で等分するので3:6:3の3分割になります。

html

<div class="container">
  <div class="row">
    <div class="col">1列目<br>.col</div>
    <div class="col-6">2列目<br>.col-6</div>
    <div class="col">3列目<br>.col</div>
  </div>
</div>

可変幅のコンテンツ(Variable width content)

col(-{breakpoint})-autoクラスを使用すると、コンテンツの中身の幅にフィットしたサイズで表示できます。
試しに可変幅に設定したコンテンツの中のテキストをたくさん入れてみた例を作成しましたが、改行されず表示されるようなので使用時には注意が必要かもしれません。

大きな画面でブラウザの幅を変更しながら確認して見て下さい。

下記のcodepenの例ページを別ページで開く

html

<div class="container">
  <h3>中央を可変幅。左右を数字を入れたクラスを指定した例</h3>
  <div class="row justify-content-sm-center">
    <div class="col col-lg-2">
      3つの列の1列目<br>.col-lg-2
    </div>
    <div class="col-md-auto">
      3つの列の2列目<br>.col-md-auto
    </div>
    <div class="col col-lg-2">
      3つの列の3列目<br>.col-lg-2
    </div>
  </div>
  <h3>中央を可変幅。左右を数字を入れないクラスを指定、右のみmdで数字を指定したクラスも設定した例</h3>
  <div class="row">
    <div class="col">
      3つの列の1列目<br>.col
    </div>
    <div class="col-md-auto">
      3つの列の2列目<br>.col-md-auto
    </div>
    <div class="col col-lg-2">
      3つの列の3列目<br>.col
    </div>
  </div>
  <h3>中央を可変幅にし、テキストを大量に入れた例</h3>
  <div class="row">
    <div class="col">
      3つの列の1列目<br>.col
    </div>
    <div class="col-sm-auto">
      可変幅コンテンツ可変幅コンテンツ可変幅コンテンツ可変幅コンテンツ可変幅コンテンツ可変幅コンテンツ可変幅コンテンツ<br>.col-md-auto
    </div>
    <div class="col col-lg-2">
      3つの列の3列目<br>.col
    </div>
  </div>
</div>

複数行の等幅(Equal-width multi-row)

等幅(Equal-width)使用時の注意点で書いたものと同じになります。
表示ユーティリティクラスの.w-100を改行させたい部分に入れることで複数行の分割を行うようです。
.w-100は幅100%を設定するクラスで、それを間に挟むことで改行をさせています。

html

<div class="container">
  <div class="row">
    <div class="col">1列目</div>
    <div class="col">2列目</div>
    <div class="w-100"></div>
    <div class="col">3列目</div>
    <div class="col">4列目</div>
  </div>
</div>

参照ページ

記事にする際に参考にさせていただいたページ。

Bootstrap公式
Bootstrap4移行ガイド
日本語訳を参照させていただきました。

-Bootstrap, CSS
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

Font Awesome 5の使い方【SVG with JavaScript編】

Font Awesome 5の使い方としては、SVG with JavaScript(JavaScriptとSVGによる描画)とWeb Fonts with CSS(CSSとwebフォントによる描画) …

【CSS】擬似要素と擬似クラスの違いの覚書

ニワカが個人的に使いこなせていないCSSを覚えるための個人的メモです。 擬似要素と擬似クラスをまとめる前に違いを覚えておくためのメモ。 最初に書いておくとW3Cの日本語訳や色々なサイトを見ましたが、小 …

【CSS】隣接セレクタの使い方の覚書

ニワカが個人的に使いこなせていないCSSセレクタを覚えるための個人的メモです。 使いこなせてないCSSセレクタ第二弾「隣接セレクタ」の覚書。 目次 隣接セレクタの概要 隣接セレクタの使用例 個人的メモ …

【Bootstrap4】グリッドレイアウト(並べ替え)

Bootstrap4のグリッドレイアウトの説明は長いので並べ替えも別ページに。 Bootsatrap4からはFlexboxを利用した列の順序変更が出来るようになりました。(記述したソースの順番ではなく …

【CSS】擬似要素の使い方の覚書

ニワカが個人的に使いこなせていないCSSを覚えるための個人的メモです。 比較的利用している「擬似要素」の覚書。 「擬似要素と擬似クラスの違いの覚書」と多少内容重複するかと思います。 目次 擬似要素の概 …