Bagaimana untuk Menyesuaikan Bootstrap 4 Breakpoints Tanpa Menyusun Semula?

Cara Menyesuaikan Bootstrap 4 Breakpoints

Anda ingin mengubah suai titik putus xl dari 1200 kepada 1280 secara global dalam Bootstrap 4. Walau bagaimanapun, memberikan nilai baharu kepada pembolehubah $grid-breakpoints Bootstrap nampaknya tidak mengubah titik putus xl. Adakah anda perlu menyusun semula Bootstrap dari awal untuk mencapainya?

Penyelesaian: Override Variables Before Import

Kunci untuk menyesuaikan titik putus Bootstrap 4 adalah untuk mengatasi pembolehubah $grid-breakpoints dan $container-max-widths sebelum mengimport sumber Bootstrap. Begini cara untuk melakukannya dalam 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>

Kini, titik putus xl akan ditetapkan secara global kepada 1280px dan mana-mana gaya Bootstrap bergantung pada titik putus, seperti lebar bekas, akan melaraskan sewajarnya.

Atas ialah kandungan terperinci Bagaimana untuk Menyesuaikan Bootstrap 4 Breakpoints Tanpa Menyusun Semula?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!