Maison >interface Web >tutoriel CSS >Comment décaler les colonnes dans Bootstrap 4 ?
Techniques de décalage de colonnes Bootstrap 4
Bootstrap 4 introduit des techniques mises à jour pour décaler les colonnes. La méthode précédente d'utilisation des classes "offset-md-*" a été supprimée dans la version bêta 1.
Présentation de .ml-auto et .mr-auto
Le nouveau L'approche utilise les classes ".ml-auto" et ".mr-auto". Ces classes ajustent automatiquement les marges pour pousser les colonnes vers la gauche ou la droite dans une ligne.
Décalages personnalisés à l'aide de colonnes factices
Pour obtenir des décalages de colonnes personnalisés, un "factice" Un espace réservé à la colonne peut être utilisé. Par exemple, pour décaler une colonne "col-md-4" de 2 unités, utilisez :
<div>
Centrage des colonnes avec .ml-auto et .mr-auto
Pour centrer deux colonnes "col-md-4" adjacentes, appliquez ".ml-auto" à la colonne de gauche et ".mr-auto" à la colonne de droite :
<div>
Utilisation de .mx-auto pour le placement centré
Pour centrer une colonne "col-md-4", appliquez ".mx-auto":
<div>
Remarque : Les décalages de colonnes spécifiques seront restaurés dans Bootstrap 4 Beta 2.
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!