客製化Bootstrap 4的網格系統斷點

Question

我有一個應用程序，其中設計需要分別從桌上型電腦到平板電腦或 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 寬處進行斷點。

Answer 1

更改 $grid-breakpoints 變數就可以正常運作。請記住，您必須匯入 custom.scss 中的 /bootstrap 或 bootstrap/variables，然後在 @import bootstrap 之後。

例如：

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

示範：https://codeply.com/go/MlIRhbJYGj

#另請參閱：如何擴充/使用 SASS 修改（自訂）Bootstrap 4

Answer 2

引導程式 4.x 和 5.x

在匯入 Bootstrap 來源之前，您需要覆寫 $grid-breakpoints 和 $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...