bootstrap

クラス

グリッドの幅を指定するクラスには、col- col-sm- col-md- col-lg- col-xl- の種類がある。横幅の種類と合わせて以下のクラスが用意されている。

col-(xs-)col-sm-col-md-col-lg-col-xl-
1col-1col-sm-1col-md-1col-lg-1col-xl-1
2col-2col-sm-2col-md-2col-lg-2col-xl-2
3col-3col-sm-3col-md-3col-lg-3col-xl-3
4col-4col-sm-4col-md-4col-lg-4col-xl-4
5col-5col-sm-5col-md-5col-lg-5col-xl-5
6col-6col-sm-6col-md-6col-lg-6col-xl-6
7col-7col-sm-7col-md-7col-lg-7col-xl-7
8col-8col-sm-8col-md-8col-lg-8col-xl-8
9col-9col-sm-9col-md-9col-lg-9col-xl-9
10col-10col-sm-10col-md-10col-lg-10col-xl-10
11col-11col-sm-11col-md-11col-lg-11col-xl-11
12col-12col-sm-12col-md-12col-lg-12col-xl-12

グリッドオプションの仕様

グリッドオプション(xs, sm, md, lg)の違いは下記のとおり。
コンテナの最大値以下になるとグリッドの横方向の段組みが解除され、縦方向に整列する。

クラス名デバイスの幅コンテナの最大幅
col-*<576pxなし(自動)
col-sm-*>=576px540px
col-md-*>=768px720px
col-lg-*>=992px960px
col-xl-*>=1200px1140px
投稿日:
カテゴリー: bootstrap

コメントする

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