Bedeutung der Zahlen in "col-md-4"," col-xs-1", "col-lg-2" in Bootstrap

Question

Ich bin verwirrt vom Rastersystem im neuen Bootstrap, insbesondere von diesen Klassen:

col-lg-*
col-md-*
col-xs-*

(wo * eine Zahl darstellt).

Kann bitte jemand folgendes erklären:

1. Wie diese Zahl die Raster ausrichtet?
2. Wie man diese Zahlen verwendet?
3. Was sie tatsächlich repräsentieren?

Answer 1

Einfachste schrittweise Erklärung, die ich geben kann.

col-md-6 bedeutet, dass:

• Das Kind-Element, in dem du diese Klasse platzierst,
• wird innerhalb seines Elternelements 6 Spalten von den verfügbaren 12 belegen,
• wenn die Bildschirmgröße gleich oder größer als 768px (medium Bildschirme) ist.

Denke daran, dass in Bootstrap (5.1):

• Es gibt 12 Spalten in ihrem Rastersystem für alle Elemente.
• Diese 12 Spalten befinden sich (wie erwartet) im Elternelement, und das Kind belegt so viele Spalten, wie du ihm mit dieser Zahl mitteilst (die 6 in diesem Beispiel).

In deinem Code könntest du so etwas sehen:

        Inhalt.

col-12 lässt das Kind alle verfügbaren Spalten des Elternelements belegen, wenn die Bildschirmgröße unter der angegebenen mittleren Bildschirmgröße von 768px liegt

Links:

• Rastersystem
• Breakpoints