Heim >Web-Frontend >CSS-Tutorial >Wie kann ich die Haltepunkte des Bootstrap 4 Grid-Systems anpassen?

Wie kann ich die Haltepunkte des Bootstrap 4 Grid-Systems anpassen?

Patricia Arquette
Patricia ArquetteOriginal
2024-11-02 07:34:02660Durchsuche

How to Customize Bootstrap 4 Grid System Breakpoints?

Anpassen der Grid-System-Haltepunkte von Bootstrap 4

In diesem Artikel erfahren Sie, wie Sie die Standard-Grid-System-Haltepunkte von Bootstrap 4 ändern. Dies kann nützlich sein, wenn Ihre Anwendung bestimmte Haltepunktwerte erfordert, die von den Standardeinstellungen von Bootstrap abweichen, z. B. die Änderung des XL-Haltepunkts von 1200 Pixel auf 1280 Pixel.

Lösung für Bootstrap 4.x und 5.x

Um die Rastersystem-Haltepunkte in Bootstrap 4.x oder 5.x global zu überschreiben, müssen Sie die Variablen $grid-breakpoints und $container-max-widths ändern, bevor Sie die Bootstrap-Quelldateien importieren. Hier ist ein Beispiel-SCSS-Code, der zeigt, wie dies erreicht wird:

<code class="scss">// File: theme.scss

// Override default BT 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 BT sources
@import "~bootstrap/scss/bootstrap";

// Your CSS (SASS) rules here...</code>

Durch diese Änderungen können Sie die Haltepunkte anpassen, um die spezifischen Anforderungen Ihrer Anwendung zu erfüllen, ohne Bootstrap aus den Quelldateien neu kompilieren zu müssen.

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

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn