Maison > interface Web > tutoriel CSS > Comment la classe Bootstrap « mb-0 » affecte-t-elle la marge d'un élément ?

Comment la classe Bootstrap « mb-0 » affecte-t-elle la marge d'un élément ?

DDD
Libérer: 2024-10-27 11:24:30
original
645 Les gens l'ont consulté

How does the Bootstrap class

Comprendre Class="mb-0" dans Bootstrap 4

Bootstrap 4 fournit des classes utilitaires complètes pour gérer les marges et les remplissages sur différentes tailles d'écran, connues sous le nom de mb ( marge inférieure). Ces classes offrent une flexibilité dans la définition de l'espacement des éléments pour différentes fenêtres, comme décrit ci-dessous :

Comprendre class="mb-0"

La classe="mb-0" cible spécifiquement la marge inférieure d'un élément et la définit sur 0. Cette classe relève de la catégorie des classes utilitaires de marge et est utilisée pour supprimer complètement la marge inférieure.

Format de classe utilitaire Bootstrap Margin and Padding

Bootstrap utilise une convention de dénomination cohérente pour ses classes utilitaires de marge et de remplissage :

{property}{sides}-{size} ou {property }{sides}-{breakpoint}-{size}

Propriété :

  • m pour la marge
  • p pour le rembourrage

Côtés :

  • t pour le haut
  • b pour le bas
  • l pour la gauche
  • r pour droite
  • x pour gauche et droite
  • y pour haut et bas

Points d'arrêt :

  • xs pour <576px
  • sm pour >=576px
  • md pour >=768px
  • lg pour >=992px
  • xl pour >=1200px

Taille :

  • 0 définit une marge ou un remplissage sur 0
  • 1 définit un margin ou padding à .25rem (4px)
  • 2 définit une marge ou un padding à .5rem (8px)
  • 3 définit une marge ou un padding à 1rem (16px)
  • 4 définit une marge ou un remplissage sur 1,5rem (24px)
  • 5 définit une marge ou un remplissage sur 3rem (48px)
  • auto définit la marge sur auto

Exemple d'utilisation

<code class="html"><p class="mb-0">Lorem ipsum</p></code>
Copier après la connexion

Ce code applique la classe="mb-0" à l'élément de paragraphe, en supprimant sa marge inférieure.

Ressources supplémentaires

Pour des informations plus complètes, reportez-vous aux ressources suivantes :

  • [Bootstrap 4.5 - Spacing](https://getbootstrap.com/docs/4.5/utilities/spacing /)
  • [w3schools : classes de marge et de remplissage Bootstrap](https://www.w3schools.com/bootstrap4/bootstrap_margin_padding.asp)

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