niwaka-web

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

Bootstrap CSS

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

投稿日:

Bootstrap4のグリッドレイアウトの説明は長いので並べ替えも別ページに。
Bootsatrap4からはFlexboxを利用した列の順序変更が出来るようになりました。(記述したソースの順番ではなく表示の順番の設定ができるように)
また、これまでにもあった途中で空欄を設けるオフセットなどの情報を記載しています。

列の順序変更(Order classes)

列全体の垂直方向の配置

.order- クラスを使用して、コンテンツの視覚的順序を制御できます。各ブレークポイントで order を設定することが可能です。(例、.order-1.order-md-2のように)
グリッドの数と同じ1〜12までがサポートされています。
Bootstrap3で使用されていたpush/pullクラスのスタイルが廃止されて.orderクラスを新たに使用する形になったようです。

列の順序変更使用例

html

<div class
  ="container">
  <h3>1番目に記述した列に.oreder-3、2番目に記述した列に.oreder-1、3番目に記述した列に.oreder-2を設定した例</h3>
  <div class="row">
    <div class="col order-3">
      1番目に記述<br>
     .order-3
    </div>
    <div class="col order-1">
      2番目に記述<br>
      .order-1
    </div>
    <div class="col order-2">
      3番目に記述<br>
      .order-2
    </div>
  </div>
  
  <h3>.order-クラス指定なし、.order-クラス指定ありを混在させた例</h3>
  <div class="row">
    <div class="col">
      1番目に記述<br>
     .order-指定なし
    </div>
    <div class="col order-2">
      2番目に記述<br>
      .order-2
    </div>
    <div class="col">
      3番目に記述<br>
     .order-指定なし
    </div>
    <div class="col order-1">
      4番目に記述<br>
      .order-1
    </div>
  </div>

まず、最初の例は全ての列に.order-クラスを設定した場合は、.order-数字の数字が小さい順から表示されます。

続いて2番目の.order-クラスの指定ありと指定なしが混在した場合は、指定なしの列が順番にまず表示され、その後に.order-数字の数字が小さい順から表示されます。

.order-firstクラス

.order-数字とは別に.order-firstというクラスが用意されています。
.order-firstクラスは、order:-1が設定されており上記の.order-クラスの指定ありや指定なし関係なく.order-firstクラスを設定した列が最初に表示されます。
flexboxでは-1以下の設定もできますが、Bootstrap4では、−1以下のクラスは用意されていないようです。

html

<h3>.order-firstを使用した例</h3>
  <div class="row">
    <div class="col">
      1番目に記述<br>
     .order-指定なし
    </div>
    <div class="col order-2">
      2番目に記述<br>
      .order-2
    </div>
    <div class="col">
      3番目に記述<br>
     .order-指定なし
    </div>
    <div class="col order-first">
      4番目に記述<br>
      .order-first
    </div>
  </div>
</div>

See the Pen Bootstarap4 列の順序変更(Order classes).order-firstクラス by niwaka-web (@niwaka-web) on CodePen.

オフセットカラム(Offsetting columns)

オフセットの訳が難しいですが、列の途中に空欄を設けることができるということです。
.offset-グリッドクラスかマージンユーティリティの二つの方法でオフセットが可能です。

オフセットクラス(Offset classes)

.offset-{breakpoint}-数字を指定すると左側に空欄を設けることができます。(例:.offset-md-4)
入れる数字は空白を入れたいグリッドカラムの数になります。

html

<div class="container">
  <h3>2列目に.offset-クラスを設定した例</h3>
  <div class="row">
    <div class="col-md-4">1列目<br>.col-md-4</div>
    <div class="col-md-4 offset-md-4">2列目<br>.col-md-4 .offset-md-4</div>
  </div>
 </div>

<div class="container">
  <h3>1,2列目ともに.offset-クラスを設定した例</h3>
  <div class="row">
    <div class="col-md-3 offset-md-3">1列目<br>col-md-3 .offset-md-3</div>
    <div class="col-md-3 offset-md-3">2列目<br>.col-md-3 .offset-md-3</div>
  </div>
 </div>
 
<div class="container">
  <h3>1列目に.offset-クラスを設定した例</h3>
  <div class="row">
    <div class="col-md-6 offset-md-3">1列目<br>.col-md-6 .offset-md-3</div>
  </div>
</div>

ブレイクポイント毎にオフセットクラスを使用した例

html

<div class="container">
  <h3>sm(小サイズ)では列の間に空欄を設け、<br>md(中サイズ)では空欄をなくした例</h3>
  <div class="row">
    <div class="col-sm-5 col-md-6">1列目<br>
      .col-sm-5 .col-md-6</div>
    <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">2列目<br>.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
  </div>

  <h3>smd(中サイズ)では列の間に空欄を設け、<br>lg(大サイズ)では空欄をなくした例</h3>
  <div class="row">
    <div class="col-sm-6 col-md-5 col-lg-6">1列目<br>.col-sm-6 .col-md-5 .col-lg-6</div>
    <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">2列目<br>.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
  </div>
</div>

マージンユーティリティ(Margin utilities)

Bootstrap4でflexboxへ移行されたことにより、.mr-auto のようなmarginユーティリティを使用して、兄弟列の間をを互いに空けることができるようになりました。
マージンユーティリティで用意されているクラスもブレイクポイントごとに用意されているのでm-ブレイクポイント-autoと設定することもできます。

html

<div class="container">
  <h3>2列目に.ml-autoを設定した例</h3>
  <div class="row">
    <div class="col-sm-4">1列目<br>.col-sm-4</div>
    <div class="col-sm-4 ml-auto">2列目<br>.col-sm-4 .ml-auto</div>
  </div>

  <h3>1列目、2列目共に.ml-md-autoを設定した例(カラムはsm設定)</h3>
  <div class="row">
    <div class="col-sm-3 ml-md-auto">1列目<br>.col-sm-3 .ml-md-auto</div>
    <div class="col-sm-3 ml-md-auto">2列目<br>.col-sm-3 .ml-md-auto</div>
  </div>
  
  <h3>1列目に.mr-autoを設定した例</h3>
  <div class="row">
    <div class="col-auto mr-auto">1列目<br>.col-auto .mr-auto</div>
    <div class="col-auto">3列目<br>.col-auto</div>
  </div>
</div>

参照ページ

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

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

-Bootstrap, CSS
-,

執筆者:


comment

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

関連記事

【CSS】擬似クラス「構造擬似クラス」の使い方の覚書

ニワカが個人的に使いこなせていないCSSを覚えるための個人的メモです。 擬似クラスは数が多いので、まずは「構造擬似クラス」の覚書。他の擬似クラスは別ページで作成予定。 「擬似要素と擬似クラスの違いの覚 …

【Bootstrap4】グリッドレイアウト(配置)

Bootstrap4のグリッドレイアウトの説明は長いので配置も別ページに。 Bootsatrap4からはFlexbox配置ユーティリティを使用して、縦と横の列を整列させることができるようになりました。 …

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

Bootstrap4のグリッドレイアウトの説明は長いので列の自動レイアウトは別ページに。 Bootsatrap4からはグリッドシステムにcss3のflexboxが利用されるようになりました。 .col …

【CSS】擬似クラス「構造擬似クラス以外」の使い方の覚書

ニワカが個人的に使いこなせていないCSSを覚えるための個人的メモです。 擬似クラスの「構造擬似クラス以外」の覚書。 「擬似クラス「構造擬似クラス」の使い方の覚書」はこちら 目次 擬似クラスの概要 リン …

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

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