在 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中文網其他相關文章!