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 画像を全画面に表示（レスポンシブでwidth100%）
メインビジュアルを画面幅すべてを使って表示させたい時があります。 Bootstrap4では、以下のように簡単に実現可能です。 HTML Bootstrap4 画像を全画面に表示（レスポンシブでwidt …
Bootstrapについて レスポンシブサイトを制作する時の心強い味方がCSSフレームワークです。 CSSフレームワークがあると短時間で簡単にレスポンシブサイトが制作できます。 その代表格と言えばTw …
Bootstrap4 インライン要素の左寄せ・右寄せ・中央寄せ（センタリング）
Bootstrap4では、インライン要素の左寄せ・右寄せ・中央寄せができるクラスがあらかじめ用意されています。 CSSをその都度書く必要はありません。クラスを追加することで、インライン要素を寄せること …
Bootstrap4 テーブル関連のクラス色々（table）
Bootstrap4はテーブル関連のクラスも充実しています。 クラスをいくつか追加するだけで、見栄えの良いテーブルを作成することができます。 スプライトやホバーでの色変えなど、自分でCSSを作成しなく …
Bootstrap4 PCでは2カラムで、スマホ画面では1カラム（サンプル）
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）
