Comment obtenir des décalages de colonnes personnalisés dans Bootstrap 4 Beta ?

La compensation des colonnes Bootstrap ne fonctionne pas : une résolution

Dans Bootstrap 4 Beta, la compensation des colonnes est apparemment devenue une source de préoccupation pour les développeurs. Les classes offset-md-* précédemment utilisées ont été éliminées selon la documentation. Cependant, ce problème a été temporairement résolu dans la version bêta 2, ramenant les classes de décalage familières.

Cependant, dans la version bêta 1, une nouvelle approche de la compensation des colonnes a été introduite à l'aide de .ml-auto classe. Bien que cette méthode puisse effectivement déplacer une colonne col-md-4, elle effectue un décalage de quatre colonnes. Ce n’est pas ce que recherchent la plupart des développeurs ; ils souhaitent des compensations personnalisées comme l'ancien

.

L'utilisation de

comme substitut s'est avérée inefficace. Par conséquent, s'agit-il d'un bug ou existe-t-il une solution de contournement viable ?

Heureusement, le problème a été corrigé avec la restauration des classes de décalage. Néanmoins, les nouvelles marges automatiques introduites dans la version bêta 1 peuvent toujours être utilisées pour la compensation des colonnes. Ces marges déplaceront la colonne le plus à droite possible. Par conséquent, le montant de la compensation dépend de l’espace disponible. S'il n'y a pas d'autres colonnes à droite de col-md-4, elle occupera tout le côté droit de la ligne.

Solutions alternatives

Vous pouvez également implémenter une colonne factice pour obtenir un décalage de deux colonnes :

<div class="row">
  <div class="col-md-2"></div>
  <div class="col-md-4">
    ...
  </div>
</div><p>Pour en centrant deux colonnes <strong>col-md-4</strong>, la combinaison de <strong>ml-auto</strong> et <strong>mr-auto</strong> peut être utilisée :</p>
<pre class="brush:php;toolbar:false"><div class="row">
  <div class="col-md-4 ml-auto">
    .
  </div>
  <div class="col-md-4 mr-auto">
    .
  </div>
</div>

Enfin, pour centrer une seule colonne col-md-4, utilisez simplement mx-auto pour des marges égales des deux côtés :

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

Remarque : Les classes de décalage de colonne spécifiques seront réintroduites dans la version bêta 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!

source：php.cn

Article précédent：Comment puis-je obtenir la compatibilité Box Shadow dans IE7 et IE8 ? Article suivant：Comment puis-je ajuster dynamiquement la couleur du texte en fonction de la luminosité de l'arrière-plan ?

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

Derniers numéros

function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...

Depuis 2024-04-29 11:01:01

0

2

1816

Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?

Depuis 2024-04-23 00:22:19

0

10

1982

La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...

Depuis 2024-04-19 15:37:47

0

1

1668

Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...

Depuis 2024-04-18 23:52:34

0

1

1571

Où sont les didacticiels sur la cartographie mentale CSS ? Didacticiel

Depuis 2024-04-16 10:10:18

0

0

1594

Rubriques connexes

Plus>

• que signifie le titre
• Pilote de carte son pour ordinateur portable
• Logiciel de machine virtuelle
• Quel logiciel est Dreamweaver ?
• Comment définir la transparence de la couleur de la police HTML
• que signifie bbs
• vue fait référence aux fichiers js
• Qu'est-ce qu'un plug-in de navigateur