【Bootstrap】containerとcontainer-fluidの違い

相关文章推荐

焦虑的柳树 · “keytool”一词不被识别为cmdlet ...· 2 年前 ·

咆哮的牛肉面 · 基于多 WGCNA ...· 2 年前 ·

傲视众生的鸵鸟 · 你可以在Docker容器内以root身份启动 ...· 3 年前 ·

听话的伤痕 · 「Linux启动pycharm」相关问答|文 ...· 3 年前 ·

<div class=”container(container-fluid)”>
	<div class=”row”>
		<div class=”col-“>ここにコンテンツが入ります！</div>
fluidには「流動的」という意味がありcontainer-fluid内の要素をその名のとおり、液体のように画面幅いっぱいに広げてくれます。 
.containerと.container-fluidのCSS
.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
.container-fluid {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
@media (min-width: 576px) {
  .container {
    max-width: 540px;
@media (min-width: 768px) {
  .container {
    max-width: 720px;
@media (min-width: 992px) {
  .container {
    max-width: 960px;
@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
.container、.container-fluidクラスの中身は同じですが、containerにのみメディアクエリによってウィンドウサイズに応じた幅が指定されています。このため、ウィンドウサイズを変えてもコンテナのサイズが変わらないようです。
margin-right: auto;
margin-left: auto;
によってコンテナが画面中央にくるようにしてくれています。
containerクラスを使用しないとどうなるのか
グリッドシステムを使用する際の基本構造として最初に書いたとおりcontainer>row>colとなります。container-fluidクラスは画面幅いっぱいに表示してくれるのだから、わざわざ書かなくてもrow>colクラスだけでいいんじゃないか？と思ったので、ない場合はどのような挙動になるのかやってみました。
        こんにちは、もっちゃんです。

国立大院卒（電気電子科）→大企業就職(2017年4月)→退職(2019年12月)→機械学習エンジニア(2020年4月)

機械学習エンジニアの卵としてひび細く長く頑張っています。

このブログは自分が気が向いたときのメモのようなブログです。