Überschreiben von Bootstrap 4.x- und 5.x-Grid-System-Haltepunkten

Um den xl-Haltepunkt von Bootstrap anzupassen, ist es wichtig, die maßgebenden Variablen zu verstehen Haltepunkte und Container widths.

sass
In Ihrem Sass-Build müssen Sie zwei Variablen ändern: $grid-breakpoints und $container-max-widths. Diese Variablen definieren die Größenschwellen, bei denen sich das Bootstrap-Rastersystem und die Containerelemente neu strukturieren.

Im bereitgestellten Sass-Code haben Sie die $grid-Breakpoints korrekt angepasst, um einen 1280-Pixel-Breakpoint einzuschließen. Damit die Änderungen jedoch wirksam werden, müssen Sie auch die Variable $container-max-widths ändern.

Arbeitsbeispiel
So überschreiben Sie den XL-Haltepunkt und setzen ihn auf 1280 Pixel: Hier ist ein funktionierendes Beispiel in Sass:

// 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...

In diesem Beispiel haben Sie die Haltepunkte von Bootstrap erfolgreich erweitert, um Ihren benutzerdefinierten 1280-Pixel-Haltepunkt einzuschließen, und gleichzeitig die maximale Breite des Containers entsprechend angepasst.