Wie kann ich Bootstrap 4-Haltepunkte ohne Neukompilierung anpassen?

So passen Sie Bootstrap 4-Haltepunkte an

Sie möchten den XL-Haltepunkt in Bootstrap 4 global von 1200 auf 1280 ändern. Das Zuweisen neuer Werte zur Variablen $grid-breakpoints von Bootstrap scheint sich nicht zu ändern der xl-Haltepunkt. Müssen Sie Bootstrap von Grund auf neu kompilieren, um dies zu erreichen?

Die Lösung: Variablen vor dem Import überschreiben

Der Schlüssel zum Anpassen von Bootstrap 4-Haltepunkten besteht darin, die zu überschreiben Variablen $grid-breakpoints und $container-max-widths vor dem Importieren der Bootstrap-Quellen. So machen Sie es in 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>

Jetzt wird der XL-Haltepunkt global auf 1280 Pixel gesetzt und alle Bootstrap-Stile, die von Haltepunkten abhängig sind, wie z. B. Containerbreiten, werden entsprechend angepasst.

Das obige ist der detaillierte Inhalt vonWie kann ich Bootstrap 4-Haltepunkte ohne Neukompilierung anpassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!