Lösung zum Verlassen von Lücken zwischen BootStrap-Rastern

Das BootStrap-Rastersystem kann unseren Container in mehrere gleich große Teile aufteilen. Wenn wir zwischen den Teilen einen bestimmten Abstand lassen möchten, denken wir zunächst daran, sie durch margin zu trennen und Lücken zu schaffen. Ist das wirklich möglich?

[Siehe ein Beispiel]:

CSS-Stil:

.row div {
 
Höhe: 100px;
 
}

HTML Quelltext:

<div Klasse="Container">
<!-- Zeilenelement -->
<div Klasse="Zeile">
<!-- Spaltenelement col-xs-value col-sm-value col-md-value col-lg-value -->
<div Klasse = "col-lg-5" Stil = "Hintergrundfarbe: Weizen;"></div>
<div Klasse = "col-lg-4" Stil = "Hintergrundfarbe: pink;"></div>
<div Klasse = "col-lg-3" Stil = "Hintergrundfarbe: schwarz;"></div>
</div>
</div>

[Der ursprüngliche Effekt ist wie folgt]:

Nun wollen wir zwischen diesen drei Teilen eine Lücke (10px) erstellen, können das ursprüngliche Layout jedoch nicht ändern. Hier fügen wir einen Randwert hinzu:

Der CSS-Stil wird wie folgt geändert:

.row div {			
Höhe: 100px;
Rand rechts: 10px;
 
}

【Effekt nach Hinzufügen des Randwerts】:

Es wurde beobachtet, dass ein Teil nach unten gedrückt wurde, was bedeutet, dass diese Operationswelle das ursprüngliche Gitterlayout verändert hat.

Die Gründe dafür sind folgende:

Wenn wir das Raster teilen, ist jeder Teil voll und wird zusammengedrückt. Um einen leeren Raum zwischen den Spalten zu schaffen, fügen Sie ihnen einen margin hinzu (während die Größe jedes Teils des Rasters selbst unverändert bleibt). Dann bewegt sich jeder Teil und überschreitet daher definitiv die Breite des übergeordneten Containers (12 Teile).

Durch die obigen Vorgänge und Erklärungen wissen wir, dass es nicht möglich ist, durch das Festlegen margin Randwerts den Effekt zu erzielen, Lücken im Rastersystem zu hinterlassen. Wie können wir also dieses Problem lösen?

【Lösung】:

Wir können für jede kleine Spalte einen padding-right festlegen, ein Feld in die kleine Spalte einfügen und seine Breite auf 100 % festlegen (dasselbe wie beim übergeordneten Feld)!

CSS-Stil:

.row div {
padding-left: 0px; // Standardmäßige linke Polsterung entfernen
Polsterung rechts: 10px;
Höhe: 100px;
}
 
.hezi {
Breite: 100 %;
Hintergrundfarbe: grün;
}  

HTML Quelltext:

<div Klasse="Container">
<!-- Zeilenelement -->
<div Klasse="Zeile">
<!-- Teil 1 -->
<div Klasse="col-md-5" Stil="Hintergrundfarbe: ;">
<div Klasse="hezi"></div>
</div>
<!-- Teil 2 -->
<div Klasse="col-md-4" Stil="Hintergrundfarbe: ;">
<div Klasse="hezi"></div>
</div>
<!-- Teil 3 -->
<div Klasse="col-md-3" Stil="Hintergrundfarbe: ;">
<div Klasse="hezi"></div>
</div>
 
</div>
</div>

Hinweis: Das Rastersystem von BootStrap ist sehr praktisch für die responsive Webentwicklung. Wenn Sie das Rastersystem verwenden, können Sie das Layout problemlos über Zeilen und Spalten steuern. Allerdings verfügt col- -默認會帶15像素的左右padding , was ziemlich problematisch sein kann. Die Lösung besteht darin, der Klasse des inneren Tags row hinzuzufügen und die linke und rechte Polsterung auf 0 zu setzen, wodurch die Standardpolsterung der Tabelle entfernt wird.

Die endgültigen Auswirkungen und Analysen sind wie folgt:

Zusammenfassen

Dies ist das Ende dieses Artikels über die Lösung zum Lassen von Lücken zwischen BootStrap-Rastern. Weitere Informationen zum Lassen von Lücken zwischen BootStrap-Rastern finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die verwandten Artikel weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!