Creative Managements and Consults
Page Top

Bootstrap4 (v4.0.0-alpha.6) の段組について

スクリーンショット 2017-06-28 7.56.27.png

Bootstrap4 は段組のレプポンシブ化で大変便利なのですが、
v4.0.0-alpha.6 で若干認識が変わったので忘備録としてメモしておきます。

Bootstrap4 発表からこれまで xs, sm, md, lg, xl の5つのブレークポイントで row = 1行 の中にどれだけの col ( column ) = 段 をいくつ入れるかを指定してきたのですが、v4.0.0-alpha.6 からは xs の指定がなくなりました。

「指定がなくなりました」とはいえ、完全にドロップして消えたわけではありません。
考え方が若干変わりました。

これまでは col-xs-x で 指定したことはこれから col-x だけになります。
これまで通りといえばそうなのですが、こっちの使い方はしてきませんでした。

<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>

とすれば勝手に3分割の画面になります。

<div class="row">
<div class="col"></div>
<div class="col-2"></div>
<div class="col"></div>
</div>

とすれば 1:2:1 の分割になるはずです。常に。

sm 以上のブレークポイントで割合を変えるには col col-sm と追加していけばいい感じです。

トラックバック(0)

トラックバックURL: https://cinquestelline.com/luna/mt-tb.cgi/111

月別 アーカイブ

スマートフォン解析