Bootstrap4 の .container を部分的に無効化する

おはようございます。たーせるです。

ついに Angular のバージョンが 8 になりましたね。おめでとうございます。おめでとうございます。

さて、最近はよく Bootstrap で遊んでおります。非常にベタな CSS フレームワークですが、それなりに見栄えのするページを手っ取り早く作れるので大好きです。

youtu.be

Bootstrap の .container を部分的に無効化する

Bootstrap を用いたレイアウトには 2 つの流儀があります。

1 つはページ全体を .container で包んだ「固定幅レイアウト」、もう 1 つは .container-fluid で包んだ「流動レイアウト」です（→公式ドキュメント）。

ぼくは前者を好んで使いますが、時々「ページの途中にある一部のコンポーネントだけはどうしても .container の枠を無視したい」というケースに遭遇することがあります。

基本は固定幅レイアウトでいいんだけど、ここだけは .container に押さえつけられず、横幅いっぱいにしたい……という。

例:

<div class="container">
  (略)
  <div>
    <!-- ★ここだけ、.container を無効化したい★ -->
  </div>
  (略)
</div>

ソリューション:

そんなときは .container のマージンを打ち消してしまいましょう。

ここでは、.container-cancellation というクラスを以下のように定義しました。

styles.css

.container-cancellation {
  margin-left : 0;
  margin-right: 0;
}

@media screen and (min-width: 576px) {
  .container-cancellation {
    margin-left : calc(-0.5 * (100vw - 540px));
    margin-right: calc(-0.5 * (100vw - 540px));
  }
}

@media screen and (min-width: 768px) {
  .container-cancellation {
    margin-left : calc(-0.5 * (100vw - 720px));
    margin-right: calc(-0.5 * (100vw - 720px));
  }
}

@media screen and (min-width: 992px) {
  .container-cancellation {
    margin-left : calc(-0.5 * (100vw - 960px));
    margin-right: calc(-0.5 * (100vw - 960px));
  }
}

@media screen and (min-width: 1200px) {
  .container-cancellation {
    margin-left : calc(-0.5 * (100vw - 1140px));
    margin-right: calc(-0.5 * (100vw - 1140px));
  }
}

Bootstrap のブレークポイントごとに、.container を相殺するため、左右に負のマージンを設定しています。

これを適用した <div> タグは、常に横幅いっぱいに表示されます。

<div class="container">
  (略)
  <div class="container-cancellation">
    <!-- ★ここだけ、.container を無効化したい★ -->
  </div>
  (略)
</div>

注意点:

この .container-cancellation は、必ず .container が直接内包する <div> に適用してください。

.container の外側で単独利用すると、ウィンドウを突き破ってしまいます。

また、.row や .col-2 などの中に書くのも NG です。あくまで、.container の左右のマージンを相殺するクラスだということを理解した上で利用しましょう。

では、また。