BootstrapでWebサイトを作る際、通常の.containerだと横幅は画面幅いっぱいになりません。

.containerではなく.container-fluidを使うと、どの画面幅でも横幅いっぱいに広がるコンテナを置くことができます。

しかし、「際限なく画面幅いっぱいに広がるのは嫌だ」ということで、下記のように.container-fluidにmax-widhtを指定しようとしたのですが、うまく効きませんでした。
(下記の例では、1400pxまで横幅を100%で表示し、1400px以上では横幅を1400pxで固定しようとしています)

.container-fluid{
  max-widht: 1400px;
}

では、どうしたのかというと、別のクラスでmax-widthを設定し、要素に.container-fluidと一緒に設定することでうまくいきました。

HTML:

<div class="container-fluid maxWidth">横幅いっぱい(100%)のコンテナ</div>

CSS:

.maxWidth{
  max-widht: 1400px;
  margin: 0 auto;
}

(margin: 0 auto;の部分はコンテナを左右中央に配置するための記述です)

これでとりあえず、.container-fluidにmax-widthを設定することができました。(正確には、.container-fluidにmax-widthを設定したわけではありませんが)

おすすめの記事