Comment les classes de décalage de colonnes ont-elles changé dans Bootstrap 4 Beta ?

Décalage des colonnes dans Bootstrap 4.0.0-Beta

Dans Bootstrap 4 Beta, les classes de décalage ont été mises à jour, ce qui a semé la confusion chez les utilisateurs habitués à utiliser "offset- md-*" pour décaler les colonnes.

Modifications de la classe Offset

Dans Bootstrap 4 Beta, les classes "offset-md-" ont été remplacées par "offset-{breakpoint}- ." Par exemple, pour décaler une colonne de deux colonnes sur un point d'arrêt moyen, vous utiliserez désormais "offset-md-2" au lieu de "col-md-offset-2".

ml-auto pour l'alignement des colonnes

La classe "ml-auto" propose une nouvelle façon d'aligner les colonnes en les déplaçant le plus à droite possible. Cependant, cette approche de marge automatique peut ne pas convenir à tous les scénarios.

Solution de contournement de décalage personnalisé

Si vous avez besoin de décalages de colonnes spécifiques, tels qu'un décalage de deux colonnes, une solution de contournement consiste à utiliser un colonne factice ou fictive pour obtenir l’effet souhaité. Par exemple :

<div class="row">
  <div class="col-md-2"></div>
  <div class="col-md-4">
    ...
  </div>
</div>

mx-auto pour centrer les colonnes

Pour centrer une colonne, utilisez la classe "mx-auto", qui crée des marges égales des deux côtés de la colonne.

<div class="row">
  <div class="col-md-4 mx-auto">
    ...
  </div>
</div>

Remarque : décalages de colonnes spécifiques dans la version bêta 2

Il est important de noter que les décalages de colonnes spécifiques, tels que "offset-md-2", seront restaurés dans Bootstrap 4 Beta 2. Cependant, les classes "ml-auto" et "mx-auto" peuvent toujours être utilisées pour un alignement et un centrage flexibles 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!