ウィンドウ幅に応じて段組みを変更する - Bootstrap

Bootstrapでウィンドウ幅に応じて段組みを変更するコードを紹介します。

概要

Bootstrapでウィンドウの幅に応じて段組みを変更する場合には、col-xl, col-lg, col-md, col-sm のクラス名を利用します。

xl,lg,md,sm,指定なしで適用されるピクセル範囲は下の表のとおりになります。

クラス名	適用される最小ピクセル	適用される最大ピクセル
col-xl-n	1200 pixel
col-lg-n	992 pixel	1200 pixel
col-md-n	768 pixel	992 pixel
col-sm-n	576 pixel	768 pixel
col-n	576 pixel

例1

コード

Bootstrapを導入し、下記のHTMLを作成します。

Column-01.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="Content/bootstrap.css" />
  <script src="Scripts/jquery.js"></script>
  <script src="Scripts/bootstrap.js"></script>
  <link rel="stylesheet" href="Column-01.css" />
</head>
<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-6 col-md-3" id="column1">項目1</div>
      <div class="col-sm-6 col-md-3" id="column2">項目2</div>
      <div class="col-sm-6 col-md-3" id="column3">項目3</div>
      <div class="col-sm-6 col-md-3" id="column4">項目4</div>
    </div>
  </div>
</body>
</html>

Column-01.css

#column1 {
    border: 1px solid #bd1515;
    background-color: #ffc5c5;
}

#column2 {
    border: 1px solid #f27200;
    background-color: #ffd89b;
}

#column3 {
    border: 1px solid #889100;
    background-color: #f4ff42;
}

#column4 {
    border: 1px solid #58b300;
    background-color: #c5f09b;
}

解説

Bootstarpの段組みで次のクラス指定をしています。col-sm-6 col-md-3
col-md-3により、768ピクセル以上ではcol-3の設定となり、4段組みで表示されます。また、col-sm-6により、576ピクセル以上、768ピクセル以下で2段組みの表示になります。576ピクセル以下では段組みが解除されます。

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。ウィンドウ幅が広い状態では4段組みで表示されます。

ウィンドウ幅を狭めます。4段組みのまま幅が狭まります。

ウィンドウ幅が768ピクセル以下になると2段組みの表示に切り替わります。

さらにウィンドウ幅を縮めると、2段組みのまま幅が縮まります。

ウィンドウ幅が576ピクセル以下になると、段組みが解除されます。

例2

コード

Bootstrapを導入し、下記のHTMLを作成します。

Column-02.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="Content/bootstrap.css" />
  <script src="Scripts/jquery.js"></script>
  <script src="Scripts/bootstrap.js"></script>
  <link rel="stylesheet" href="Column-02.css" />
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-xl-1 col-lg-3 col-md-4 col-sm-2 col-6" id="column1">項目1</div>
      <div class="col-xl-2 col-lg-3 col-md-4 col-sm-2 col-6" id="column2">項目2</div>
      <div class="col-xl-2 col-lg-3 col-md-4 col-sm-2 col-6" id="column3">項目3</div>
      <div class="col-xl-2 col-lg-3 col-md-4 col-sm-2 col-6" id="column4">項目4</div>
      <div class="col-xl-2 col-lg-3 col-md-4 col-sm-2 col-6" id="column5">項目5</div>
      <div class="col-xl-2 col-lg-3 col-md-4 col-sm-2 col-6" id="column6">項目7</div>
      <div class="col-xl-1 col-lg-3 col-md-4 col-sm-2 col-6" id="column7">項目8</div>
    </div>
  </div>
</body>
</html>

Column-02.css

#column1 {
    border: 1px solid #bd1515;
    background-color: #ffc5c5;
}

#column2 {
    border: 1px solid #f27200;
    background-color: #ffd89b;
}

#column3 {
    border: 1px solid #889100;
    background-color: #f4ff42;
}

#column4 {
    border: 1px solid #58b300;
    background-color: #c5f09b;
}

#column5 {
    border: 1px solid #00d3ac;
    background-color: #9bf0d1;
}

#column6 {
    border: 1px solid #000ce2;
    background-color: #c1ceff;
}

#column7 {
    border: 1px solid #4000cb;
    background-color: #d8bdff;
}

解説

col-xlの設定により、1200ピクセル以上では7段組みで左右の列の幅が狭い設定となります。col-lgの設定により1200ピクセル以下では4段組み表示となります。col-mdの設定により992ピクセル以下では3段組みの表示となり、col-smの設定で768ピクセル以下では等間隔の6段組みの表示となります。576ピクセル以下ではcolの設定により2段組みの表示となります。