Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Wie füge ich in Bootstrap einen vertikalen Abstand zwischen Zeilen hinzu, ohne die Zeilenklasse zu ändern?

DDD
Freigeben: 2024-10-27 11:36:02
Original
753 Leute haben es durchsucht

How to Add Vertical Spacing Between Rows in Bootstrap Without Modifying the Row Class?

Hinzufügen des vertikalen Abstands zwischen Zeilen in Twitter Bootstrap

Die Zeilenklasse von Bootstrap ist für die Seitenstruktur von entscheidender Bedeutung. In Situationen, in denen Sie jedoch einen zusätzlichen oberen Rand zwischen Zeilen benötigen, ist es unklug, die Zeilenklasse selbst zu ändern.

Lösung: Erstellen Sie eine benutzerdefinierte Klasse

Erstellen Sie stattdessen eine Erstellen Sie eine benutzerdefinierte Klasse wie „top-buffer“, um diesen Effekt zu erzielen. Dieser Ansatz vermeidet Eingriffe in das Kern-Bootstrap-Framework und ermöglicht die Flexibilität, nur bei Bedarf einen oberen Rand hinzuzufügen.

CSS-Deklaration:

<code class="css">.top-buffer {
  margin-top: 20px;
}</code>
Nach dem Login kopieren

HTML-Implementierung :

Wenden Sie die Klasse „top-buffer“ auf die spezifischen Zeilen an, die einen oberen Randabstand erfordern.

<code class="html"><div class="row top-buffer">...</div></code>
Nach dem Login kopieren

Diese Lösung bietet einen saubereren und gezielteren Ansatz zum Hinzufügen vertikaler Abstände zwischen Reihen unter Wahrung der Integrität des Bootstrap-Gittersystems.

Das obige ist der detaillierte Inhalt vonWie füge ich in Bootstrap einen vertikalen Abstand zwischen Zeilen hinzu, ohne die Zeilenklasse zu ändern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage