「Bootstrap.cssのContainers」のサンプル
「Bootstrap.cssのクラス名のサンプル：和訳」の「Containers」のサンプルページです。
横幅固定でいくのか、100%にするのかで使い分ける。
幅固定
ウィンドウ幅1200px以上 -「width: 1170px;」
ウィンドウ幅992px以上 -「width: 970px;」
ウィンドウ幅768px以上 -「width: 750px;」
ウィンドウ幅768px未満 -「指定なし」→幅100％
ウィンドウ幅992px以上 -「width: 970px;」
ウィンドウ幅768px以上 -「width: 750px;」
ウィンドウ幅768px未満 -「指定なし」→幅100％
幅100％
幅100％
実際のソース
<h2>幅固定</h2> <div class="container" style="background:#eee;"> ウィンドウ幅1200px以上 -「width: 1170px;」<br /> ウィンドウ幅992px以上 -「width: 970px;」<br /> ウィンドウ幅768px以上 -「width: 750px;」<br /> ウィンドウ幅768px未満 -「指定なし」→幅100％<br /> </div> <h2>幅100％</h2> <div class="container-fluid" style="background:#eee"> 幅100％<br /> </div>