Maison > interface Web > tutoriel CSS > Comment ajouter une marge supérieure aux lignes dans Twitter Bootstrap sans modifier la classe « ligne » ?

Comment ajouter une marge supérieure aux lignes dans Twitter Bootstrap sans modifier la classe « ligne » ?

Barbara Streisand
Libérer: 2024-10-29 01:50:30
original
623 Les gens l'ont consulté

How to Add Top Margin to Rows in Twitter Bootstrap Without Modifying the

Ajout d'une marge supérieure aux lignes dans Twitter Bootstrap

Le framework Twitter Bootstrap offre un moyen pratique de créer des mises en page réactives. Cependant, il peut arriver que vous deviez ajouter une marge supérieure supplémentaire à un élément de ligne. Bien qu'il soit tentant de modifier la classe "row" existante, cela n'est pas recommandé car cela peut entraîner des conflits avec le style de base du framework.

Solution :

Au lieu de modifier la classe "row", créez une nouvelle classe appelée "top-buffer" qui ajoute la marge souhaitée. Voici comment procéder :

  1. Dans votre fichier CSS, ajoutez le code suivant :
<code class="css">.top-buffer { margin-top: 20px; }</code>
Copier après la connexion
  1. Appliquez la classe "top-buffer" au éléments de ligne auxquels vous souhaitez ajouter une marge supérieure :
<code class="html"><div class="row top-buffer">
    ...
</div></code>
Copier après la connexion

En créant une classe distincte, vous pouvez cibler des lignes spécifiques tout en préservant le comportement par défaut de la classe "row" pour d'autres situations. Cette approche préserve l'intégrité du framework Bootstrap tout en vous permettant de personnaliser vos mises en page selon vos besoins.

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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal