グリッド内部のコンテンツを外側の枠の横幅に合わせたい - Bootstrap

Bootstrapでグリッド内部のコンテンツを外側の枠の横幅に合わせるコードを紹介します。

動作の確認

Bootstrapを利用したプロジェクトで、以下のHTMLファイルを作成します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="/css/bootstrap.css" />
  <link rel="stylesheet" href="/css/bootstrap-grid.css" />
  <link rel="stylesheet" href="/css/bootstrap-reboot.css" />
  <link rel="stylesheet" href="/css/bootstrap-utilities.css" />
  <script src="/js/bootstrap.js"></script>
  <link rel="stylesheet" href="grid01.css" />
</head>
<body>
  <div class="HeadFrame"></div>

  <div class="container-fluid cframe">
    <div class="row">
      <div class="col-2 gframe">
        <p>1</p>
        <div class="contentFrame">F</div>
        <p>1</p>
      </div>
      <div class="col-2 gframe">
        <p>2</p>
        <div class="contentFrame">F</div>
        <p>2</p>
      </div>
      <div class="col-2 gframe">
        <p>3</p>
        <div class="contentFrame">F</div>
        <p>3</p>
      </div>
      <div class="col-2 gframe">
        <p>4</p>
        <div class="contentFrame">F</div>
        <p>4</p>
      </div>
      <div class="col-2 gframe">
        <p>5</p>
        <div class="contentFrame">F</div>
        <p>5</p>
      </div>
      <div class="col-2 gframe">
        <p>6</p>
        <div class="contentFrame">F</div>
        <p>6</p>
      </div>
    </div>
  </div>
</body>
</html>

grid01.css

.cframe {
  margin:1rem auto 0 auto;
  border:1px solid #ff6a00;
  width:800px;
}

.gframe {
  border: 1px solid #00ae94;
}

.contentFrame {
  width: 100%;
  height: 5rem;
  background-color: #ffd800;
}

.HeadFrame {
  border: 1px solid #30a6ff;
  background-color: #b2deff;
  margin: 1rem auto 0 auto;
  width: 800px;
  height: 4rem;
}

上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。

ここで、ページの先頭の枠class="HeadFrame" とBootstrapのグリッドの枠内のコンテンツ(黄色の枠)が表示されていますが、黄色の枠が水色の枠より内側に表示されます。
黄色の枠と水色の枠の左右の位置を同じ位置にそろえたいです。

枠の左右を揃える方法1:上部の枠もグリッドにする

Bootstrapのグリッドの枠には、1.5remのpaddingが設定されているため、グリッドの枠内に余白が追加され、外側の枠とのずれができます。上部の枠もBootstrapのグリッドの枠に設定することで、上部の枠にも、1.5remのpaddingが追加され、コンテンツの左端が揃う状態になります。

コード

以下のHTMLファイルを作成します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="/css/bootstrap.css" />
  <link rel="stylesheet" href="/css/bootstrap-grid.css" />
  <link rel="stylesheet" href="/css/bootstrap-reboot.css" />
  <link rel="stylesheet" href="/css/bootstrap-utilities.css" />
  <script src="/js/bootstrap.js"></script>
  <link rel="stylesheet" href="grid02.css" />
</head>
<body>
  <div class="container-fluid HeadFrame">
    <p>Head</p>
    <div class="contentFrame">F</div>
    <p>Head</p>
  </div>

  <div class="container-fluid cframe">
    <div class="row">
      <div class="col-2 gframe">
        <p>1</p>
        <div class="contentFrame">F</div>
        <p>1</p>
      </div>
      <div class="col-2 gframe">
        <p>2</p>
        <div class="contentFrame">F</div>
        <p>2</p>
      </div>
      <div class="col-2 gframe">
        <p>3</p>
        <div class="contentFrame">F</div>
        <p>3</p>
      </div>
      <div class="col-2 gframe">
        <p>4</p>
        <div class="contentFrame">F</div>
        <p>4</p>
      </div>
      <div class="col-2 gframe">
        <p>5</p>
        <div class="contentFrame">F</div>
        <p>5</p>
      </div>
      <div class="col-2 gframe">
        <p>6</p>
        <div class="contentFrame">F</div>
        <p>6</p>
      </div>
    </div>
  </div>
</body>
</html>

grid02.css

.cframe {
  margin:1rem auto 0 auto;
  border:1px solid #ff6a00;
  width:800px;
}

.gframe {
  border: 1px solid #00ae94;
}

.contentFrame {
  width: 100%;
  height: 5rem;
  background-color: #ffd800;
}

.HeadFrame {
  border: 1px solid #30a6ff;
  background-color: #b2deff;
  margin: 1rem auto 0 auto;
  width: 800px;
}

解説

上部の水色の枠にcontainer-fluidクラスを追加して、グリッドの枠に設定します。
内部にコンテンツの枠を記述します。

  <div class="container-fluid HeadFrame">
    <p>Head</p>
    <div class="contentFrame">F</div>
    <p>Head</p>
  </div>

実行結果

上記のHTMLを表示すると、下図のページが表示されます。

ページ上部の横長の黄色の枠の左端、右端と、6列のグリッドの左右の端が一致した状態になりました。

枠の左右を揃える方法2:グリッドの枠のrowにmarginにマイナスの値を設定する

別の方法として、グリッドの枠のrowの枠のmarginにマイナスの値を設定する方法があります。

コード

以下のHTMLファイルを作成します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="/css/bootstrap.css" />
  <link rel="stylesheet" href="/css/bootstrap-grid.css" />
  <link rel="stylesheet" href="/css/bootstrap-reboot.css" />
  <link rel="stylesheet" href="/css/bootstrap-utilities.css" />
  <script src="/js/bootstrap.js"></script>
  <link rel="stylesheet" href="grid03.css" />
</head>
<body>
  <div class="container-fluid HeadFrame">
  </div>

    <div class="container-fluid cframe">
      <div class="row rowFrame">
        <div class="col-2 gframe">
          <p>1</p>
          <div class="contentFrame">F</div>
          <p>1</p>
        </div>
        <div class="col-2 gframe">
          <p>2</p>
          <div class="contentFrame">F</div>
          <p>2</p>
        </div>
        <div class="col-2 gframe">
          <p>3</p>
          <div class="contentFrame">F</div>
          <p>3</p>
        </div>
        <div class="col-2 gframe">
          <p>4</p>
          <div class="contentFrame">F</div>
          <p>4</p>
        </div>
        <div class="col-2 gframe">
          <p>5</p>
          <div class="contentFrame">F</div>
          <p>5</p>
        </div>
        <div class="col-2 gframe">
          <p>6</p>
          <div class="contentFrame">F</div>
          <p>6</p>
        </div>
      </div>
    </div>
</body>
</html>

grid03.css

.rowFrame {
  margin: 0 -1.5rem 0 -1.5rem;
}

.cframe {
  border: 1px solid #ff6a00;
  margin: 1rem auto 0 auto;
  width: 800px;
}

.gframe {
  border: 1px solid #00ae94;
}

.contentFrame {
  width: 100%;
  height: 5rem;
  background-color: #ffd800;
}

.HeadFrame {
  border: 1px solid #30a6ff;
  background-color: #b2deff;
  margin: 1rem auto 0 auto;
  width: 800px;
  height: 4rem;
}

解説

Bootstarpのグリッドレイアウトの row のクラスに rowFrameクラスを追加して rowの要素にスタイルを設定できるようにします。

  <div class="container-fluid cframe">
    <div class="row rowFrame">
      <!-- 中略 -->
    </div>
  </div>

rowFramのスタイル定義が以下です。
Bootstrapのpaddingが1.5rem設定されているため、マージンを -1.5rem することで、paddingのサイズ分外側に表示して相殺して表示します。

.rowFrame {
  margin: 0 -1.5rem 0 -1.5rem;
}

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。

ページ上部の横長の水色枠の左端、右端と、6列のグリッドのコンテンツの左右の端が一致した状態になりました。

著者

とりっち

iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。

目次

グリッド内部のコンテンツを外側の枠の横幅に合わせたい - Bootstrap

動作の確認

枠の左右を揃える方法1:上部の枠もグリッドにする

コード

解説

実行結果

枠の左右を揃える方法2:グリッドの枠のrowにmarginにマイナスの値を設定する

コード

解説

実行結果

関連するページ