Bootstrapカラムのソース

 カラムの指定方法

<div class="col-md-6">と指定した場合、使用するカラムは、「6」ですから、１行に２枠配置することになります。これは、「md」以上のときは、１行に２枠。「md」以下のときは、１行に１枠となります。同様に、<div class="col-sm-6">と指定すると、「xs」のときだけ１行に１枠、それ以外は、１行に２枠になります。

<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">と指定した場合、１行に「xs」では１枠、「sm」では２枠、「md」では３枠、「lg」では４枠配置することになります。（「xs-12」は、省略可）

このように、表示が変わる分岐点だけ指定することに奈路ます。

 カラムのサンプルソース

利用方法 レイアウトしたいテキストエリアのソースの上で右キリックしてコピーすれば、利用できます。

col-sm-6 col-sm-6 の2段組み

 1行2枠 6：6

Header (6)

Header (6)

col-sm-3 col-sm-9 の2段組み

 1行2枠 3：9 （3と9を入れ替えれば9:3になります）

Header (3)

Header (9)

col-sm-4 col-sm-8 の2段組み

 1行2枠 4：8 （4と8を入れ替えれば8:4になります）

Header (4)

Header (8)

col-md-3 col-md-6 col-md-3 の3段組み

特別なレイアウト このレイアウトは、「md」までは、3:6:3ですが、「sm」になると、両サイドの小さい枠を合わせて6:6にして１行にします。そして、中央を１行にし、２段で表示します。「xs」では、全てを１行にし、３段で表示するようにしています。

 1行3枠 3：6：3

Header (3)

Header (3)

Header (6)

col-sm-3 col-sm-3 col-sm-6 の3段組み

 1行3枠 3：3：6

Header (3)

Header (3)

Header (6)

col-sm-6 col-sm-3 col-sm-3 の3段組み

 1行3枠 6：3：3

Header (6)

Header (3)

Header (3)

col-md-3 col-md-3 col-md-3 col-md-3 の4段組み

 1行4枠 3：3：3：3

Header (3)

Header (3)

Header (3)

Header (3)

col-md-2 col-md-2 col-md-2 col-md-2 col-md-2 col-md-2 の6段組み

 1行6枠 2：2：2：2：2：2

Header (2)

Header (2)

Header (2)

Header (2)

Header (2)

Header (2)

col-sm-5 col-sm-5 オフセット

 1行2枠 5：オフセット2：5

Header (5)

Header (5)