
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:
1 2 3 4 5 | <div class = "row g-0" >
<div class = "col" >...</div>
<div class = "col" >...</div>
<div class = "col" >...</div>
</div>
|
Nach dem Login kopieren
Bootstrap 4 (Kein zusätzliches CSS erforderlich)
Bootstrap 4 bietet die No-gutters-Klasse für Zeilen:
1 2 3 4 5 | <div class = "row no-gutters" >
<div class = "col" >...</div>
<div class = "col" >...</div>
<div class = "col" >...</div>
</div>
|
Nach dem Login kopieren
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:
- Erstellen Sie eine neue CSS-Klasse:
1 2 3 4 | .row.no-gutter {
margin-left: 0;
margin-right: 0;
}
|
Nach dem Login kopieren
- Entfernen Sie den Abstand aus allen Spalten außer der ersten und der letzten:
1 2 3 4 5 | .row.no-gutter [ class *= 'col-' ]:not(:first-child),
.row.no-gutter [ class *= 'col-' ]:not(:last-child) {
padding-right: 0;
padding-left: 0;
}
|
Nach dem Login kopieren
- Wenden Sie die No-Rinnen-Klasse auf das Gewünschte an Zeilen:
1 2 3 4 5 | <div class = "row no-gutter" >
<div class = "col-lg-1" >...</div>
<div class = "col-lg-1" >...</div>
<div class = "col-lg-1" >...</div>
</div>
|
Nach dem Login kopieren
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!