Railsアプリケーションでブートストラップ4のメディアクエリをカスタマイズする

Question

Bootstrap 4のメディアクエリをカスタマイズしたい（新しいxxlメディアクエリを追加する）。

この解決策に基づいて、Bootstrap 4 - how to use media query mixinは、新しい$ grid-breakpointを定義しようとしますが、ブートストラップの動作には影響しません。

私はBootstrapのgem installを使用しました。

Bootstrapは新しいメディアクエリを使用しないため、ブートストラップファイルを自分のスタイルシートに明示的に含める方法がわかりません（ブートストラップのミックスインと機能を使用するため）。ブートストラップのインストールは、あなたがコピー/ペースト、ここで宝石が提供するブートストラップ4 SCSS変数を変更してみてください

/Users/myname/.rvm/gems/ruby-2.4.1/gems/bootstrap-4.0.0.beta2.1 

Answer 1

に位置しています：

$grid-breakpoints: (
    xs: 0, 
    sm: 576px, 
    md: 768px, 
    lg: 992px, 
    xl: 1200px 
) !default; 

Answer 2

：ライン161からhttps://github.com/twbs/bootstrap-rubygem/blob/master/assets/stylesheets/bootstrap/_variables.scss

まずbootstrap-rubygemは、あなたのアプリケーションスタイルシートにscssを使用することをお勧めします。

のはbootstrap_overrides.scss、およびコピー/ペーストを言うとhereからあなたが望む任意の変数を変更させ、すべてのブートストラップのオーバーライドを保持するファイルを作成し、あなたのケースでは、このようにする必要があります：単にその後

$grid-breakpoints: (
    xs: 0, 
    sm: 576px, 
    md: 768px, 
    lg: 992px, 
    xl: 1200px, 
    xxl: 1500px 
) !default; 
$container-max-widths: (
    sm: 540px, 
    md: 720px, 
    lg: 960px, 
    xl: 1140px, 
    xxl: 1440px 
) !default; 

このように、ブートストラップ前application.scssにあなたの上書きをインポートします。

@import "bootstrap_overrides"; 
@import "bootstrap";