如何自訂 Bootstrap 4 網格系統斷點？

自訂Bootstrap 4 網格系統斷點

在本文中，我們將探討如何修改Bootstrap 4 的預設網格系統斷點。如果您的應用程式需要與 Bootstrap 預設不同的特定斷點值，例如將 xl 斷點從 1200px 變更為 1280px，這會很有用。

Bootstrap 4.x 和5.x 的解決方案

要在Bootstrap 4.x 或5.x 中全域覆蓋網格系統斷點，您需要在匯入Bootstrap 原始檔之前修改$grid-breakpoints 和$container-max-widths 變數。以下是一個範例scss 程式碼，示範如何實現此目的：

<code class="scss">// File: theme.scss

// Override default BT variables:
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1280px
);

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

// Import BT sources
@import "~bootstrap/scss/bootstrap";

// Your CSS (SASS) rules here...</code>

透過進行這些修改，您可以自訂斷點以滿足應用程式的特定要求，而無需從原始檔重新編譯Bootstrap 。

以上是如何自訂 Bootstrap 4 網格系統斷點？的詳細內容。更多資訊請關注PHP中文網其他相關文章！