Das Rastersystem von Bootstrap basiert auf Flexbox und ermöglicht bis zu 12 Spalten auf der Seite.
Wenn Sie nicht alle 12 Spalten einzeln verwenden möchten, können Sie die Spalten gruppieren, um breitere Spalten zu erstellen:
span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 |
span 4 | span 4 | span 4 | |||||||||
span 4 | span 8 | ||||||||||
span 6 | span 6 | ||||||||||
span 12 |
Das Rastersystem reagiert und die Spalten werden je nach Bildschirmgröße automatisch neu angeordnet.
Stellen Sie sicher, dass die Summe 12 oder weniger beträgt (es ist nicht erforderlich, dass Sie alle 12 verfügbaren Spalten verwenden).
Das Bootstrap 5-Rastersystem verfügt über sechs Klassen:
.col-
(extra kleine Geräte - Bildschirmbreite weniger als 576 Pixel)
.col-sm-
(kleine Geräte - Bildschirmbreite gleich oder größer als 576 Pixel)
.col-md-
(mittlere Geräte - Bildschirmbreite gleich oder größer als 768 Pixel)
.col-lg-
(große Geräte - Bildschirmbreite gleich oder größer als 992 Pixel)
.col-xl-
(xlarge-Geräte - Bildschirmbreite gleich oder größer als 1200 Pixel)
.col-xxl-
(xxlarge-Geräte - Bildschirmbreite gleich oder größer als 1400 Pixel)
Die oben genannten Klassen können kombiniert werden, um dynamischere und flexiblere Layouts zu erstellen.
Tipp: Jede Klasse skaliert, wenn Sie also die gleichen Breiten für sm
und festlegen möchten md
, Sie müssen nur sm
angeben.
Das Folgende ist eine Grundstruktur eines Bootstrap 5-Rasters:
<!-- Control the column width, and how they should appear on different devices -->
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<!-- Or let Bootstrap automatically handle the layout -->
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid mt-3">
<h1>Basic Grid Structure</h1>
<p>Resize the browser window to see the effect.</p>
<p>The first, second and third row will automatically stack on top of each other when the screen is less than 576px wide.</p>
<!-- Control the column width, and how they should appear on different devices -->
<div class="row">
<div class="col-sm-6 bg-primary text-white">50%</div>
<div class="col-sm-6 bg-dark text-white">50%</div>
</div>
<br>
<div class="row">
<div class="col-sm-4 bg-primary text-white">33.33%</div>
<div class="col-sm-4 bg-dark text-white">33.33%</div>
<div class="col-sm-4 bg-primary text-white">33.33%</div>
</div>
<br>
<!-- Or let Bootstrap automatically handle the layout -->
<div class="row">
<div class="col-sm bg-primary text-white">25%</div>
<div class="col-sm bg-dark text-white">25%</div>
<div class="col-sm bg-primary text-white">25%</div>
<div class="col-sm bg-dark text-white">25%</div>
</div>
<br>
<div class="row">
<div class="col bg-primary text-white">25%</div>
<div class="col bg-dark text-white">25%</div>
<div class="col bg-primary text-white">25%</div>
<div class="col bg-dark text-white">25%</div>
</div>
</div>
</body>
</html>
Erstes Beispiel: Erstellen Sie eine Zeile (<div class="row">
). Fügen Sie dann die gewünschte Anzahl von Spalten hinzu (Tags mit entsprechenden .col-*-*
-Klassen). Der erste Stern (*) stellt die Reaktionsfähigkeit dar: sm, md, lg, xl oder xxl, während der zweite Stern eine Zahl darstellt, die sich für jede Zeile auf 12 summieren sollte.
Zweites Beispiel: Anstatt jeder Spalte
eine Zahl hinzuzufügen, überlassen Sie Bootstrap das Layout, um Spalten gleicher Breite zu erstellen: zwei " col"
Elemente=50 % Breite für jede Spalte, während drei Spalten=33,33 % Breite für jede Spalte. Vier Spalten=25 % Breite usw. Sie können auch .col-sm|md|lg|xl|xxl
verwenden, um die Spalten responsiv zu machen.
Die folgende Tabelle fasst zusammen, wie das Bootstrap 5-Rastersystem auf verschiedenen Bildschirmgrößen funktioniert:
Extra small (<576px) | Small (>=576px) | Medium (>=768px) | Large (>=992px) | Extra Large (>=1200px) | XXL (>=1400px) | |
---|---|---|---|---|---|---|
Class prefix | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
Grid behaviour | Horizontal at all times | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints |
Container width | None (auto) | 540px | 720px | 960px | 1140px | 1320px |
Suitable for | Portrait phones | Landscape phones | Tablets | Laptops | Laptops and Desktops | Laptops and Desktops |
# of columns | 12 | 12 | 12 | 12 | 12 | 12 |
Gutter width | 1.5rem (.75rem on each side of a column) | 1.5rem (.75rem on each side of a column) | 1.5rem (.75rem on each side of a column) | 1.5rem (.75rem on each side of a column) | 1.5rem (.75rem on each side of a column) | 1.5rem (.75rem on each side of a column) |
Nestable | Yes | Yes | Yes | Yes | Yes | Yes |
Offsets | Yes | Yes | Yes | Yes | Yes | Yes |
Column ordering | Yes | Yes | Yes | Yes | Yes | Yes |