Webの勉強をしよう！Web制作の技術やサービス情報を発信します。
投稿日：2017年11月22日 更新日：
Bootstrap4のcontainerクラスは最大幅が1140pxに設定されています。
サイトのよっては、画面幅100%を使って制作したい場合があります。
オシャレなサイトなどで多いですよね。
こんな要望にもBootstrapだと簡単に応える事ができます。
やり方もとても簡単で「container」クラスを「container-fluid」に変えるだけでOKです。
Bootstrapだと超簡単ですね！
|
1 2 3 4 5 |
<div class="container-fluid"> <div class="row"> ・・・ </div> </div> |
「fluid」は「流体」「流動体」という意味があるようです。
なんとなくですが理解できますね。
良ければサンプルも見てくださいね。
たったこれだけで全画面表示に対応したサイトが作成できます。
自分でCSSを組まなくても、クラス名をしていくだけで様々な状況に対応していけるのがCSSフレームワークの醍醐味ですよね。
ありがたく使わせてもらいましょう！
執筆者：sasaki
関連記事
Bootstrap4 colの隙間（padding、margin）を削除する（サンプル付き）
Bootstrap4でデザインを忠実に再現したい時に、colの隙間（padding）が邪魔なときがあります。 この邪魔な隙間を無くしてしまおう！というのが今回の趣旨です。 サンプルも作りました。 CS …
Bootstrap4で縦の領域はcolクラスを使って分ける事になります。 縦幅を均等に分けたい場合 均等に縦幅を分けたい場合はrowの中にcolを好きな数だけ作ればOKです。 例えばrowの中にcol …
Bootstrap4 divに影（シャドウ）を付ける（影付きのdiv・ボックス）
Bootstrap4では、影（シャドウ）を付けるクラスが初めから用意されています。 クラスを追加するだけで簡単に影（シャドウ）を付けることができます。 Bootstrap4 divに影（シャドウ）を付 …
Bootstrap4 上下中央・上寄せ・下寄せ（d-flex）
上下中央や上寄せ、下寄せに配置するためのクラスも用意されています。 flexboxを利用するため、それぞれ２つのクラスを指定すればOKです。 1. 上下中央寄せ 「d-flex」と「align-ite …
Bootstrap4の画像で使用できる基本的なクラスをまとめました。 各クラスはimgタグに付加するだけで効果が発揮されます。 基本的なクラスは以下の4種類です。 Bootstrap4 画像用クラス …
2019/02/11
2019/02/11
Python3 for文で添え字（index）を取得する方法（enumerate関数）
2018/11/10
gulp.js コンパイル時にエラーになっても中断させない（gulp-plumber）
2018/11/04
JavaScript 一定時間後に処理を実行させるサンプル（setTimeout）
2018/11/03
JavaScript クリックイベントをJavaScriptで実現するサンプル
2018/10/21
2018/10/13
Bootstrap4 上部固定メニューヘッダを作るサンプル（fixed-top）
