In diesem Beitrag wird erläutert, was Zwischenräume sind und wie sie für ein bestimmtes div in Bootstrap entfernt werden können.
Was ist Gutter Space in Bootstrap?
Die Dachrinnen sind die Zwischenräume oder Lücken zwischen den Säulen, die durch horizontale Polsterung entstehen. Sie werden verwendet, um die reaktionsschnelle Ausrichtung von Inhalten und Leerzeichen im Bootstrap-Rastersystem zu unterstützen.
Das unten angegebene Bild zeigt eine Reihe mit einem roten Rahmen darum. Innerhalb der Zeile existieren drei gleich große div-Elemente gleicher Rasterspalten. Obwohl die Spalten gleich sind, gibt es immer noch Zwischenräume zwischen ihnen:
Wie entferne ich den Dachrinnenraum für ein bestimmtes div in Bootstrap?
In Bootstrap ist die Klasse „ keine Dachrinnen “ wird verwendet, um die Bundstege von div zu eliminieren.
Für diesen Zweck:
- Füge hinzu ein ' „Tag zusammen mit der Klasse“ Haupt-Div “.
- Passen Sie dann einen Zeilenabschnitt an, indem Sie ein weiteres „
„Element mit der Klasse“ Zeile “. Da wir die Leerzeichen aus der Zeile entfernen müssen, geben Sie eine Klasse an „ keine Dachrinnen ' darin.- Um die Rasterzeile in drei gleiche Spalten zu unterteilen, verwenden Sie die Klasse „ col-4 “.
- Passen Sie im „
“-Container jeder Spalte die „“-Elemente mit den Klassen „ Spalte-1 “, „ Spalte-2 ', und ' Spalte-3 ', bzw: < div Klasse = 'main-div' >
< div Klasse = 'Reihe ohne Dachrinnen' >
< div Klasse = 'col-4' >
< div Klasse = 'Spalte-1' >< / div >
< / div >
< div Klasse = 'col-4' >
< div Klasse = 'Spalte-2' >< / div >
< / div >
< div Klasse = 'col-4' >
< div Klasse = 'Spalte-3' >< / div >
< / div >
< / div >
< / div >CSS
Im CSS-Abschnitt werden die auf der HTML-Seite erwähnten Klassen mit mehreren Styling-Eigenschaften gestaltet.
Stil „main-div“-Klasse
.main-div {
Breite : 600px;
Rand: 50px automatisch;
}Die ' .main-div “ wird erwähnt, um auf das div-Element zuzugreifen, das die Klasse „ Haupt-div “. Die folgenden Eigenschaften werden auf diese Klasse angewendet:
- „ Breite “ definiert die Breite des Elements.
- „ Rand ” legt den Abstand um das Element herum fest.
Klasse „Zeile“ gestalten
.Zeile {
Grenze : 1px solide rot;
}Der Bootstrap“ Zeile ” Klasse wird mit dem “ Grenze ' Eigentum. Dadurch wird die Rasterzeile in einer bestimmten Breite, einem Stil und einem Farbrahmen umbrochen.
Die drei Klassen“ Spalte-1 “, „ Spalte-2 ', und ' Spalte-3 ” werden das CSS zugewiesen “ Hintergrundfarbe ' und ' Höhe ” Eigenschaften, um sie hervorzuheben.
Stil „Spalte-1“-Klasse
.Säule- einer {
Hintergrund- Farbe : türkis;
Höhe : 200px;
}Stil „Spalte-2“-Klasse
.Säule- 2 {
Hintergrund- Farbe : violett;
Höhe : 200px;
}Stil „Spalte-3“-Klasse
.Säule- 3 {
Hintergrund- Farbe : Gelbgrün;
Höhe : 200px;
}Es lässt sich beobachten, dass „
„Container mit der Klasse“ Zeile “ wurde erfolgreich angepasst, ohne Zwischenraum zwischen ihnen:
Wir haben Ihnen beigebracht, wie Sie den Zwischenraum für ein bestimmtes div in Bootstrap entfernen.
Fazit
Um Zwischenräume für ein bestimmtes div zu entfernen, muss die Klasse „ keine Dachrinnen ' kann verwendet werden. Fügen Sie zu diesem Zweck das „
”-Element zusammen mit dem “ Reihe ohne Dachrinnen ' Klasse. Dieser Beitrag enthält eine umfassende Anleitung zu Gutter Spaces und wie sie für ein bestimmtes div in Bootstrap entfernt werden können. - Passen Sie dann einen Zeilenabschnitt an, indem Sie ein weiteres „