2017-12-11 7 views
1

デスクトップからタブレットへの1280ブレークポイント、またはxlからlgへの1280ブレークポイントが必要なアプリケーションがあります。しかし、ブートストラップ自体は1200でxlブレークポイントを持っています。ブートストラップ4ブレイクポイントを変更する

ブートストラップのためにそのxlブレークポイントをグローバルに変更する必要があります。ブートストラップ4をソースファイルから再コンパイルする必要がありますか?

私は私の構築サスでこれをで設定しようとした:しかし、何がグローバルXLのためのブレークポイントを変更しない

$grid-breakpoints: (
    // Extra small screen/phone 
    xs: 0, 
    // Small screen/phone 
    sm: 576px, 
    // Medium screen/tablet 
    md: 768px, 
    // Large screen/desktop 
    lg: 992px, 
    // Extra large screen/wide desktop 
    xl: 1280px 
); 

$container-max-widths: (
    sm: 540px, 
    md: 720px, 
    lg: 960px, 
    xl: 1220px 
); 

、それはまだ1200pxワイドで代わりに休憩を行うだろう。

答えて

0

そのdocumentationによると、ブートストラップをカスタマイズするためにあなたがする必要があります。/scss/_variables.scssから

  1. コピー/ペースト_custom.scssにあなたは
  2. を変更したいものは何でも貼り付けコードから任意の!defaultを削除し、値を変更あなたが望むものに
  3. 再コンパイル(Build toolsを参照) - ソースから再構築するには、npm run distを正常に実行する必要があります。

_variables.scssの中には、ブートストラップのアップグレード時に変更が失われるため、変更する必要はありません。上記の手順で、ブートストラップを安全にアップグレードし、改造を維持することができます。

注:、アップグレードを気にしない、とあなたは/scss/_variables.scssで直接変更したい場合でも、あなたはまだ/dist/のファイルに変更を適用するために再コンパイルする必要があります。

1

$grid-breakpoints変数を変更すると正常に動作します。 https://www.codeply.com/go/MlIRhbJYGj

:あなたは custom.scss

デモに/bootstrapまたはをインポートする必要があることを忘れないでください

関連する問題