如何更改 Bootstrap 4 的 XL 斷點？

自訂 Bootstrap 4 的斷點

在 Bootstrap 4 中，預設的 XL 斷點設定為 1200px。然而，在某些應用中，可能需要不同的斷點。本指南介紹如何自訂 Bootstrap 的斷點，並提供了將專案的 XL 斷點變更為 1280px 的解決方案。

要全域變更 XL 斷點，需要修改 $grid-breakpoints 和 $container-max Bootstrap 的 Sass 原始檔中的 -widths 變數。以下是如何執行此操作的範例：

<code class="scss">$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1280px
);

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

// Import Bootstrap source files after modifying variables
@import "~bootstrap/scss/bootstrap";</code>

透過在匯入 Bootstrap 原始程式碼之前修改這些變量，您可以覆寫預設斷點並在應用程式中使用自訂值。此方法可讓您自訂 Bootstrap 的網格系統以滿足專案的特定需求，而無需從原始檔案重新編譯框架。

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