So entfernen Sie den Rinnenraum für eine bestimmte DIV in Bootstrap

Das Bootstrap Grid -System besteht aus vielen Containern, Zeilen und Spalten für Layout- und Inhaltsausrichtung. Das Gittersystem legte eine Zeile mit 12 virtuellen Spalten aus, um die Webseiten vollständig zu reagieren. Es gibt jedoch Polsterung oder Räume um oder zwischen den Säulen. Diese Räume sind als "bekannt"Rinnenräume”.

In diesem Beitrag wird diskutieren, welche Rinnenräume sind und wie sie für eine bestimmte DIV in Bootstrap entfernt werden können.

Was ist Rinnenraum in Bootstrap?

Die Dachrinnen sind die Leerzeichen oder Lücken zwischen den Säulen, die durch horizontale Polsterung erzeugt werden. Sie werden verwendet, um eine reaktionsschnelle Inhaltsausrichtung und Räume im Bootstrap Grid -System zu unterstützen.

Unten zeigt das angegebene Bild eine Reihe mit einem roten Rand um sie herum. Innerhalb der Zeile gibt es drei gleichgroße Divisionselemente gleicher Gittersäulen. Obwohl die Säulen gleich sind, gibt es immer noch Rinnenräume zwischen ihnen:

So entfernen Sie den Rinnenraum für eine bestimmte DIV in Bootstrap?

In Bootstrap, die Klasse “No-Turts”Wird verwendet, um die Rinnenräume eines jeden Divs zu beseitigen.

Für diesen Zweck:

• Füge hinzu ein ""Tag zusammen mit der Klasse"Main-div”.
• Passen Sie dann einen Zeilenabschnitt an, indem Sie einen anderen hinzufügen “"Element mit der Klasse"Reihe”. Da wir die Leerzeichen aus der Zeile entfernen müssen, geben Sie eine Klasse an “No-Turts" darin.
• Verwenden Sie die Klasse, um die Rasterreihe in drei gleiche Spalten zu unterteilen. “col-4”.
• Passen Sie in den „Container der einzelnen Spalte die„ “Elemente mit Klassen an“Spalte 1","Spalte 2", Und "Spalte 3", bzw:

CSS

Im CSS -Abschnitt sind die in der HTML -Seite genannten Klassen mit mehreren Styling -Eigenschaften gestaltet.

Stil „Main-Div“ -Klasse

.Main-div
Breite: 600px;
Rand: 50px Auto;

Der ".Main-div"Wird erwähnt, um auf das Div -Element mit Klasse zugreifen zu können"Main-div”. Die folgenden Eigenschaften werden auf diese Klasse angewendet:

• “Breite”Definiert die Breite des Elements.
• “Rand”Legt den Abstand um das Element um.

Stil „Zeile“ -Klasse

.Reihe
Grenze: 1px solide Rot;

Die Bootstrap "Reihe"Klasse wird mit dem" hinzugefügt "Grenze" Eigentum. Dadurch wird die Rasterreihe in eine bestimmte Breite, Stil und Farbgrenze einwickelt.

Die drei Klassen “Spalte 1","Spalte 2", Und "Spalte 3"Werden die CSS zugewiesen"Hintergrundfarbe" Und "HöheEigenschaften, die sie prominent machen.

Stil „Spalte 1“ Klasse

.Spalte-1
Hintergrundfarbe: Türkis;
Höhe: 200px;

Stil „Spalte 2“ Klasse

.Spalte-2
Hintergrundfarbe: Violet;
Höhe: 200px;

Stil „Spalte 3“ Klasse

.Spalte-3
Hintergrundfarbe: Yellowgreen;
Höhe: 200px;

Es kann beobachtet werden, dass das “"Container mit der Klasse"Reihe”Wurde erfolgreich ohne Rinnenraum zwischen ihnen eingestellt:

Wir haben Ihnen beigebracht, wie Sie den Rinnenraum für eine bestimmte Div in Bootstrap entfernen können.

Abschluss

Um die Rinnenräume für eine bestimmte Div, die Klasse, zu entfernen “No-Turts" kann verwendet werden. Zu diesem Zweck fügen Sie das hinzu “”Element zusammen mit dem“Reihe No-Turts" Klasse. Dieser Beitrag hat einen umfassenden Leitfaden zu Rinnenräumen und wie sie für eine bestimmte DIV in Bootstrap beseitigt werden.