bootstrapのカラムの考え方

Question

bootstrapのバージョン４を初めて学んでいます。このページ、

https://www.marorika.com/entry/bootstrap-beginner

の、真ん中あたり、「ブラウザのウィンドウサイズを変えると、レイアウトが変わる様子を確認することができます。スマホサイズのデバイスではsizeが12のカラムを4つ、それよりも大きいデバイスでは一つ一つのカラムsizeを大きくなるにつれ6、4と設定しています。」が分かりません。

一番小さくすると、4つのカラムが上下に並びますが、それよりも大きいデバイスでは、６？４？特に6が分かりません。６になりません。

教えて下さい。

Comments

[m.ts10806]

ご自身が採用しようとしているBootstrapのバージョンは何でしょうか。
マイナーバージョンも含めて提示してください。
また、実際に自分で組んで確認されたのでしょうか。

[m.ts10806]

「bootstrapについて」というタイトルだとタグの内容繰り返しているだけなので
要件をきちんと記載してください

Answer 1

あまり荒らしたくはないのだけど何となく不憫なので。

bootstrapはcontainer(以下画面と表現します)の幅を、
12個に分割してレイアウトするというCSSフレームワークです。
レスポンシブを簡単に実装できるという触れ込みで一時期流行りました。
モバイルファーストで記述されています。

col-〇〇というclassを付けることで、
１２個に区切った画面のいくつ分を割り当てるか決めています。

スマホの画面は区切ると小さくなりすぎるので基本的に１２個分を全部使います。

col-sm-6はスマホの横表示のケースかなと思います。
カラム（div要素）が６個に増えるわけではなくて、
画面幅を１２個に区切った６個分を使って表示してねー、という意味になります。
画面幅に対して、〇〇/12ですので、6/12だと1/2、つまり画面半分です。
カラムを２個並べることができますね。

col-md-4はタブレットの縦表示のケースかなと思います。
カラム（div要素）が増えたり減ったり変化するわけではなくて、
画面幅を１２個に区切った４個分を使って表示してねー、という意味になります。
画面幅に対して、〇〇/12ですので、4/12だと1/3、つまりカラムは３個並びになります。

お手軽サイトよりも公式で確認する方が良いかなと思います。
一次情報ですね。

バージョンによって仕様が変わったりするので、
どのバージョンの話なのかは大事ですよ。
とりあえず4.2で貼っておきますね。

参考URL　bootstrap公式　ver4.2
https://getbootstrap.jp/docs/4.2/layout/grid/

以下蛇足です。

質問の修正依頼が出ていると思いますので、
対応していただけると非常に助かります。

ぱっと見て分かりにくい質問が増えると回答も被りますし、
解決策を探している人もたどり着けないかもしれません。

自分だけのためではなくて、他の誰かのためになるように。
少しだけ心がけていただけることをひそかに願います。