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!