Comment puis-je contrôler l'ordre des colonnes Bootstrap sur différents points d'arrêt réactifs ?

Ordre des colonnes Bootstrap sur des mises en page réactives

Lors de la conception avec Bootstrap, obtenir un ordre de colonnes spécifique peut être difficile, en particulier lorsqu'il s'agit de lignes imbriquées et de points d'arrêt réactifs. Dans ce scénario, un utilisateur recherchant une disposition dans laquelle les colonnes sont disposées dans un ordre spécifique sur les appareils mobiles, tout en conservant un ordre différent sur des ordinateurs de bureau plus grands, a rencontré un problème avec le comportement par défaut de Bootstrap.

La disposition flexbox de Bootstrap 4 applique de manière inhérente des hauteurs de colonnes égales, ce qui rend impossible l'obtention de la disposition de bureau souhaitée avec l'extrait de code initial fourni. Pour surmonter cette limitation, deux approches alternatives sont disponibles :

Option 1 : Désactiver Flexbox aux points d'arrêt importants

Cette approche implique de désactiver la disposition de la flexbox pour les points d'arrêt importants (par exemple, "lg"), ce qui permet les colonnes flottent en tant qu'éléments sans contrainte. En exploitant les flottants et en spécifiant l'ordre souhaité à l'aide des classes « order-* », la disposition des colonnes peut être personnalisée comme suit :

<div class="row d-flex d-lg-block">
  <div class="col-lg-8 order-1 float-left">2</div>
  <div class="col-lg-4 order-0 float-left">1</div>
  <div class="col-lg-4 order-1 float-left">3</div>
</div>

Option 2 : Flexbox Hack en utilisant la largeur automatique

A plus Une approche complexe consiste à manipuler la disposition de la flexbox à l'aide de la propriété "w-auto". Cette technique nécessite une combinaison de règles flexbox et de requêtes multimédias pour obtenir l'ordre des colonnes souhaité.

<div class="row">
  <div class="col order-md-3 w-auto d-none d-md-block">1</div>
  <div class="col order-md-1 w-auto">2</div>
  <div class="col order-md-2 w-auto">3</div>
</div>

Le choix de la solution appropriée dépend des exigences spécifiques et des contraintes de conception de l'application. Les deux options résolvent efficacement le problème de la personnalisation de l'ordre des colonnes dans Bootstrap, offrant flexibilité et contrôle sur la mise en page.

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!