[Bootstrap4] container-fluidを使いつつ、max-widthも設定する
スポンサーリンク
Bootstrap4で、container-fluidを使いつつ、max-widthも設定する方法のメモ。
参考https://stackoverflow.com/questions/18964366/how-can-i-set-the-width-of-fluid-bootstrap-containers
bootstrapで.containerを使うと、スマホで表示する時に、スマホ画面の横幅に対して最大になってくれない場合がある。.container-fluidなら常に最大になる。
一方で、PCでは最大幅を指定しておきたい。ということで、.container-fluidを使いつつ、max-widthも設定したいのだが、単に.container-fluidクラスにmax-widthを上書きするのはだめで、.container-fluidを設定したタグに、別のクラスを設定し、そのクラスに対してmax-widthを与えるとうまくいく。
.container-fluid{
width: 1170px;
}
○
<div class=”container-fluid maxWidth”></div>
css
.maxWidth {
max-width:1170px;
}
スポンサーリンク
