はじめに
breakpointとcontainer幅について復習します。
以下のURLの日本語リファレンスの表を参考にさせて頂きました。
グリッド・システム ≪ CSS ≪ Bootstrap3日本語リファレンス
windowサイズが以下それぞれの数値のときに、container幅もそれに対応した数値になります。
| Window幅 | container幅 |
|---|---|
| ～767px | None (auto) |
| 768px～991px | 750px |
| 992px～1199px | 970px |
| 1200px～ | 1170px |
上記した数値はそれぞれ変数があるので、そのペアを変更することになります。
Bootstrapのsass版をダウンロードする
「Bootstrap · The world's most popular mobile-first and responsive front-end framework.」で bootstrap-sass-3.3.7.tar.gz をダウンロードしました。
どこを編集するのか
圧縮されたファイルを展開すると、中に「assets/stylesheets/bootstrap/_variables.scss」があるので、その中を編集します。
breakpoint
breakpoint設定の変数は以下の4つです。
- $screen-xs: 480px !default;
- $screen-sm: 768px !default;
- $screen-md: 992px !default;
- $screen-lg: 1200px !default;
$screen-xsはcontainerの幅変更には関与していませんが、他のコンポーネントで使用されています。
container幅
container幅設定の変数は以下の4つです。
- $container-tablet: (720px + $grid-gutter-width) !default;
- $container-desktop: (940px + $grid-gutter-width) !default;
- $container-large-desktop: (1140px + $grid-gutter-width) !default;
grid内余白
以下の変数が該当箇所なのですが、影響を与えるコンポーネントは少なくないので、0など極端な数値に変更したい場合はコンパイルした後で個別に変更した方が良いかもしれません。
- $grid-gutter-width: 30px !default;
編集する
例えばcontainerの最大幅が1170pxだと狭いと感じる場合は、$container-large-desktop と $screen-lg を変更すると良いでしょう。
コンパイルする
普段はgulpやWebpackを使っているのでわからなくなりがちなのですが、「assets/stylesheets/_bootstrap.scss」を以下のコマンドでコンパイルします。
sass _bootstrap.scss:bootstrap.css
