logo jQueryに強い、基本料金0円。わかりやすい料金設定でご提供する、
コーディング代行サービス「ココマチ コーディングラボ」
03-6432-0915

MENU

スタッフブログ

お見積り依頼

Bootstrapのブレイクポイントとその設定方法

設定方法
以下のようなコードを例として説明します。
<div class=”row”> <div class=”col-md-4 col-sm-6″”>     ……………………… </div”> <div class=” col-md-4 col-sm-6″”>     ……………………… </div”> <div class=” col-md-4 col-sm-12″”>     ……………………… </div”> </div”>

Bootstrapのブレイクポイントは、<div class=”col-md- xx “>の「md」の部分を変えることで変更出来ます。「xs」はスマートフォンで表示幅が768px未満、「sm」はタブレットで表示幅が768px以上、「md」はデスクトップで表示幅が992px以上、「lg」はデスクトップ(大)で表示幅が1200px以上です。4種類全ての設定が必要なわけではありません。

上記の例では、「md」、即ち992px以上の表示幅(一般的なディスプレイ以上の画面)の場合、4:4:4=1:1:1で表示されます。Bootstrapのグリッドシステムでは、1行分が12列に分割されていて、12列を超えた場合は2行目に表示されることになりますので、「sm」、即ち768px以上992px未満(タブレットの画面)では2つのブロックを1行目に6:6=1:1の割合で表示させ、2行目には1つのブロックが表示されることになります。画面幅が設定より狭くなるとグリッドレイアウトが解除され、そのブロックが縦並びに表示されるので、768未満(スマートフォンの画面)では、全てのブロックが縦並びに表示されることになります。