Maison > interface Web > tutoriel CSS > Comment obtenir les décalages de colonnes souhaités dans Bootstrap 4.0.0-beta ?

Comment obtenir les décalages de colonnes souhaités dans Bootstrap 4.0.0-beta ?

Patricia Arquette
Libérer: 2024-11-09 08:26:02
original
708 Les gens l'ont consulté

How to Achieve Desired Column Offsets in Bootstrap 4.0.0-beta?

Dilemme de compensation de colonne Bootstrap résolu

Dans Bootstrap v4.0.0-beta, le offset-md- précédemment utilisé * Les classes pour les décalages de colonnes ont été supprimées. La documentation suggère d'utiliser .ml-auto à la place. Cependant, cette approche entraîne un comportement inattendu, décalant les colonnes de quatre au lieu du montant prévu.

L'écart provient du nouveau système de présentation basé sur flexbox dans Bootstrap 4. Les classes de décalage ne sont plus pertinentes grâce à la flexibilité des colonnes. Pour obtenir des décalages personnalisés, envisagez les solutions suivantes :

  1. Colonne d'espace réservé :

    • Ajoutez une colonne factice de la taille de décalage souhaitée à créez de l'espace pour votre colonne de décalage.
  2. Marges automatiques (ml/mr-auto) :

    • Centrez plusieurs colonnes : Divisez votre colonne de décalage par deux et appliquez ml-auto et mr-auto à chaque colonne.
    • Centrer une seule colonne : Utilisez mx-auto pour créer des marges égales sur les deux côtés.

Modifications à venir :
Il est important de noter que des décalages de colonnes spécifiques seront réintroduits dans la version bêta 2 de Bootstrap 4. Cela restaurera la possibilité d'utiliser des classes comme offset-md-2 pour obtenir un déplacement précis des colonnes.

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