タグ

2018年8月6日のブックマーク (1件)

  • 【Bootstrap4】グリッドレイアウト基本 – niwaka-web

    .container(固定枠)または.container-fluid(流動枠)で外枠を設定 .rowで行を設定 .col-[prefix]-[数字]でカラムを設定 [prefix]でブレイクポイントの接頭辞(xsやmdなど)を指定。 [数字]でカラムの幅を設定。1行ごとに(prefixごとに)合計で12になるように指定します。12以上になるといわゆるカラム落ちで表示されます。 グリッドシステム使用例 small(568px以上)以上の画面幅になると1行を3:6:3の3分割の3列のレイアウトになります。 568px未満では、それぞれ横100%で縦に積み重なる形でレイアウトされます。 Bootstarpはモバイルファーストなので最小サイズで、レイアウトの設定をしない場合は各列が横100%で縦に積み重なる形でレイアウトされます。 html <div class="container"> <div