Wie kann ich den Gutter Space in Bootstrap für bestimmte Divs entfernen oder anpassen?

Entfernen des Zwischenraums für bestimmte Divs

Das Standardrastersystem von Bootstrap umfasst einen Zwischenraum von 30 Pixel zwischen den Spalten, was zu einer Zeile mit 360 Pixel ungenutztem Raum führt, wenn die Zwischenräume vollständig entfernt werden. Um dieses Problem zu beheben und gleichzeitig die Reaktionsfähigkeit von Bootstrap aufrechtzuerhalten, führen Sie die folgenden Schritte aus:

Bootstrap 5 (seit Update 2021)

Bootstrap 5 führte bestimmte Gutter-Klassen ein:

• g-0: Nein Dachrinnen
• g-(1-5): Horizontale und vertikale Dachrinnen mithilfe von Abstandseinheiten anpassen
• gy-*: Vertikale Dachrinnen anpassen
• gx-*: Horizontal anpassen gutters

Beispiel:

<div class="row g-0">
    <div class="col">...</div>
    <div class="col">...</div>
    <div class="col">...</div>
</div>

Bootstrap 4 (Kein zusätzliches CSS erforderlich)

Bootstrap 4 bietet die No-gutters-Klasse für Zeilen:

<div class="row no-gutters">
    <div class="col">...</div>
    <div class="col">...</div>
    <div class="col">...</div>
</div>

Bootstrap 3 (Original Antwort)

Bootstrap 3 führte die Verwendung von Polsterungen anstelle von Rändern für Dachrinnen ein. Um diesen Effekt zu erzielen:

1. Erstellen Sie eine neue CSS-Klasse:

.row.no-gutter {
    margin-left: 0;
    margin-right: 0;
}

2. Entfernen Sie den Abstand aus allen Spalten außer der ersten und der letzten:

.row.no-gutter [class*='col-']:not(:first-child),
.row.no-gutter [class*='col-']:not(:last-child) {
    padding-right: 0;
    padding-left: 0;
}

3. Wenden Sie die No-Rinnen-Klasse auf das Gewünschte an Zeilen:

<div class="row no-gutter">
    <div class="col-lg-1">...</div>
    <div class="col-lg-1">...</div>
    <div class="col-lg-1">...</div>
</div>

Das obige ist der detaillierte Inhalt vonWie kann ich den Gutter Space in Bootstrap für bestimmte Divs entfernen oder anpassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!