2019-06-01 :

bootstrapでコンテナの幅を固定する方法


デフォルトの設定ではディスプレイ画面に合わせて自動でコンテナの幅を決められてしまうので、それを固定する方法を探しました。

いくつか見つかったのですが、自分は以下のようにscssファイルでcontainerクラスを上書きする方法で解決させました。この記述だとディスプレイの大きさに依らずコンテナの幅が 750px に固定されます。

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 750px;
  }
}


他にも、新たにcontainer-fluidクラスをscssで定義して用いる方法もあるようです。
参考:https://crafrite.com/web-pc/web/9.html