客製化Bootstrap 4的網格系統斷點-PHP中文網路問答

文章專題學習下載問答程式設計字典遊戲最近更新

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW)

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

P粉696891871 2023-10-18 23:01:50

359

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

P粉696891871

全部回覆(2)

P粉0435663142023-10-19 20:06:59 2樓

更改 $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

點贊 +0

新增回覆

P粉0526867102023-10-19 00:57:43 1樓

引導程式 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...

點贊 +0

新增回覆