Maison > interface Web > tutoriel CSS > le corps du texte

Comment ajouter un espacement vertical entre les lignes dans Bootstrap sans modifier la classe de ligne ?

DDD
Libérer: 2024-10-27 11:36:02
original
698 Les gens l'ont consulté

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

Ajout d'un espacement vertical entre les lignes dans Twitter Bootstrap

La classe de lignes de Bootstrap est essentielle pour la structure des pages. Cependant, dans les situations où vous avez besoin d'une marge supérieure supplémentaire entre les lignes, il n'est pas judicieux de modifier la classe de lignes elle-même.

Solution : créez une classe personnalisée

Au lieu de cela, créez une classe personnalisée, telle que « top-buffer », pour obtenir cet effet. Cette approche évite d'interférer avec le framework Bootstrap de base et permet une flexibilité dans l'ajout de marge supérieure uniquement lorsque cela est nécessaire.

Déclaration CSS :

<code class="css">.top-buffer {
  margin-top: 20px;
}</code>
Copier après la connexion

Implémentation HTML :

Appliquez la classe "top-buffer" aux lignes spécifiques qui nécessitent un espacement de la marge supérieure.

<code class="html"><div class="row top-buffer">...</div></code>
Copier après la connexion

Cette solution offre une approche plus propre et plus ciblée pour ajouter un espacement vertical entre les lignes tout en préservant l'intégrité du système de grille Bootstrap.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!