您希望在 Bootstrap 4 中將 xl 斷點從 1200 全域修改為 1280。但是,為 Bootstrap 的 $grid-breakpoints 變數分配新值似乎不會更改 xl 斷點。是否需要從頭開始重新編譯 Bootstrap 來完成此操作?
自訂Bootstrap 4 斷點的關鍵是覆寫導入Bootstrap 來源之前的$grid-breakpoints 和$container- max-widths 變數。以下是在 Sass 中執行此操作的方法:
<code class="scss">// theme.scss // Override default Bootstrap 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 Bootstrap sources @import "~bootstrap/scss/bootstrap"; // Custom CSS rules here...</code>
現在,xl 斷點將全域設定為 1280px,任何依賴斷點的 Bootstrap 樣式(例如容器寬度)都會相應調整。
以上是如何在不重新編譯的情況下自訂 Bootstrap 4 斷點?的詳細內容。更多資訊請關注PHP中文網其他相關文章!