如何覆蓋 Bootstrap 4.x 和 5.x 網格系統斷點？

覆蓋Bootstrap 4.x 和5.x 網格系統斷點

要自訂Bootstrap 的xl 斷點，了解控制變數至關重要斷點和容器寬度。

sass
在 Sass 建構中，您需要修改兩個變數：$grid-breakpoints 和 $container-max-widths。這些變數定義 Bootstrap 網格系統和容器元素將自行重組的大小閾值。

在提供的 Sass 程式碼中，您已正確調整 $grid-breakpoints 以包含 1280px 斷點。但是，要使變更生效，您也必須修改 $container-max-widths 變數。

工作範例
要覆蓋xl 斷點並將其設定為1280px，這是Sass 中的一個工作範例：

<code class="scss">// theme.scss
// Override default BT variables
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1280px, // Custom xl breakpoint
  xxl: 1900px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1220px, // Custom max-width for xl breakpoint
  xxl: 1610px
);

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

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

在此範例中，您已成功擴充Bootstrap 的斷點以包含自訂的1280px斷點，同時也相應地調整容器的最大寬度。

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