Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Wie füge ich in Twitter Bootstrap vertikalen Abstand zwischen Zeilen hinzu, ohne die Klasse „row' zu ändern?

Linda Hamilton
Freigeben: 2024-10-30 09:18:27
Original
334 Leute haben es durchsucht

How to Add Vertical Space Between Rows in Twitter Bootstrap Without Modifying the

Hinzufügen eines vertikalen Abstands zwischen Zeilen in Twitter Bootstrap

Das Hinzufügen eines oberen Rands zu „Zeilen“-Elementen kann die visuelle Attraktivität Ihrer Webseite verbessern. Von der direkten Bearbeitung der „row“-Klasse im Twitter Bootstrap-Framework wird jedoch abgeraten, da sie eine entscheidende Komponente der Seitenstruktur ist.

Um dieses Problem zu beheben, besteht ein geeigneterer Ansatz darin, eine neue CSS-Klasse zu erstellen, z „top-buffer“, der den gewünschten Rand bereitstellt.

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

Durch die Anwendung dieser Klasse auf eine bestimmte Zeile können Sie einen oberen Rand hinzufügen, ohne das Standardverhalten des „row“-Elements zu beeinflussen. Wenn Sie beispielsweise einer bestimmten Zeile einen oberen Rand von 20 Pixeln hinzufügen möchten, verwenden Sie einfach das folgende Markup:

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

Mit dieser Methode können Sie bei Bedarf einen oberen Rand zu einzelnen Zeilen hinzufügen die Kernklasse „row“ unverändert.

Das obige ist der detaillierte Inhalt vonWie füge ich in Twitter Bootstrap vertikalen Abstand zwischen Zeilen hinzu, ohne die Klasse „row' 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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!