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

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

関連記事

【Bootstrap4】グリッドレイアウト基本

今一番利用されているCSSフレームワークBootstrap。自分でも何度か利用しましたが他の方のコーディングしたものでもベースにBootstrapを利用しているのを良く見かけます。 そこで、基本のグリ …

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

ニワカが個人的に使いこなせていないCSSセレクタを覚えるための個人的メモです。 サイト作成をする際にCSSは何百行、何千行にもなることがあるので、出来るだけわかりやく汎用的に書ける様にするために覚えて …

Font Awesome 5の使い方【SVGとWeb fontsの比較】

これまでのページにも書いていますがFont Awesome 5の使い方は、 SVG with JavaScript(JavaScriptとSVGによる描画)と Web Fonts with CSS(C …

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

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

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

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