tkymtk's blog

Ruby on Rails及びその周辺について調べたこと。Do whatever you want to do at your own pace.

bootstrap-sassで、ブレイクポイントの変更

方法

  • cssファイルの@import "bootstrap"より前に、変更したい変数を指定。
  • その際に、ブレイクポイントの変数を上書きする。

実践

$screen-xs-min: 240px;
$screen-sm-min: 384px;
$screen-md-min: 496px;
$screen-lg-min: 600px;

@import "bootstrap";

とりあえず、すべて半分の値にしましてみました。 必要な値に変えて下さい。 プロダクション環境では、プリコンパイルをしていないと適用されない場合があると思います。

備考

  • ブレイクポイントを変更することによって、 画面サイズ(xs,sm,md,lg)に適用するcssの切り替え点を変えることができます。
  • ナビゲーションバーがトグルされるようになるサイズを変更したいときなどに使えます。

リンク

間違いがあれば、ご指摘下さると幸いです。