web-dev-qa-db-ja.com

Bootstrap 4ブレークポイントの変更

デザインでデスクトップからタブレット、またはxlからlgにそれぞれ1280のブレークポイントを必要とするアプリケーションがあります。ただし、Bootstrap自体には、1200にxlブレークポイントがあります。

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

私はSassビルドでこれを設定しようとしました：

$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
);

ただし、xlのブレークポイントがグローバルに変更されることはなく、代わりに幅1200pxでブレークが実行されます。

csstwitter-bootstrapsassresponsive-designbootstrap-4
22
smb

$grid-breakpoints変数の変更は正常に機能します。 /bootstrapまたはbootstrap/variables内のcustom.scssをインポートしてから、@ import bootstrapafter。

例えば：

$grid-breakpoints: (
  xs: 0,
  sm: 600px,
  md: 800px,
  lg: 1000px,
  xl: 1280px
);

デモ： https://www.codeply.com/go/MlIRhbJYGj

以下も参照してください： SASSでBootstrap 4を拡張/変更（カスタマイズ）する方法

16
Zim

Bootstrapソースをインポートする前に、$grid-breakpointsand$container-max-widths変数をオーバーライドする必要があります。ここに実際の例（scss）：

// File: theme.scss
// Override default BT variables:
$grid-breakpoints: (
        xs: 0,
        sm: 576px,
        md: 768px,
        lg: 992px,
        xl: 1200px,
        xxl: 1900px
);

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

// Import BT sources
@import "../node_modules/bootstrap/scss/bootstrap";

// Your CSS (SASS) rules here...
22
kxo

ドキュメント によると、Bootstrapをカスタマイズするには、次のことが必要です。

  1. /scss/_variables.scssから_custom.scssに変更するものをコピーして貼り付けます
  2. 貼り付けられたコードから!defaultを削除し、値を必要なものに変更します
  3. 再コンパイル（ ビルドツール を参照）-npm run distを正常に実行してソースから再ビルドする必要があります。

Bootstrapをアップグレードするとこれらの変更が失われるため、_variables.scss内の何かを変更することは想定されていません。上記の手順で、Bootstrapを安全にアップグレードし、MODを保持できます。

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

8
Andrei Gheorghiu