【Bootstrap4】グリッドシステムのカラムを入れ子にする

  • このエントリーをはてなブックマークに追加

グリッドシステムでカラムを入れ子にすることができます。入れ子(ネスト)にすることで、より複雑なレイアウトを簡単に作成することができます。

     
  1. グリッドシステムの基本
  2. カラムを入れ子にする

 1. グリッドシステムの基本

グリッドシステムを利用すると、画面幅によってコンテンツの配置が変わるレスポンシブ対応のレイアウトを簡単に作成することができます。下記の記事では、グリッドシステムの基本的な利用方法を図とサンプルコードを提示しながら説明しています。参考までにご確認ください。

https://empitsublog.com/bootstrap4-grid/

 2. カラムを入れ子にする

.container (.container-fluid) > .row > .col > .row > .colのように、カラムを入れ子にすることが可能です。

入れ子の例として、mediumサイズ以上の場合(768px以上)はサイドメニューが左に表示され、mediumサイズ未満の場合(768px未満)はサイドメニューを画面上部に表示するデザインを作成します。
・サイドメニュー: col-12 col-md-4
・メインコンテンツ: col-12 col-md-8
・メインコンテンツ内のコンテンツ:col-6

●Html

  • このエントリーをはてなブックマークに追加

SNSでもご購読できます。

コメントを残す

*