Maison > interface Web > tutoriel CSS > le corps du texte

Les classes Push/Pull de Bootstrap peuvent-elles réorganiser les colonnes de taille égale sur les appareils mobiles ?

Patricia Arquette
Libérer: 2024-11-05 21:38:02
original
550 Les gens l'ont consulté

Can Bootstrap's Push/Pull Classes Reorder Equal-Sized Columns on Mobile Devices?

Réorganisation des colonnes Bootstrap avec Push/Pull : limitations et approches alternatives

Lorsque vous traitez des colonnes de taille égale (.col-*-12), une requête courante se pose concernant la faisabilité de modifier leur ordre à l'aide des directives push et pull de Bootstrap. Le but de cette requête est de comprendre s'il est possible d'inverser le placement de deux de ces colonnes sur les appareils dotés de tailles d'écran mobiles.

Limitations du Push/Pull

Malheureusement, il n'est pas possible de réorganiser .col-*-12 colonnes utilisant des classes push et pull. Cela est dû au fait que la somme de ces colonnes dépasse la taille de grille prédéfinie de 12 colonnes, comme spécifié par la variable @grid-columns dans Bootstrap.

Approches alternatives

Pour atteindre l'objectif réorganisation souhaitée, envisagez les alternatives suivantes :

1. Modification de la structure HTML et utilisation du push/pull pour les écrans plus grands :

Réorganisez les colonnes dans le code HTML et appliquez des classes push/pull pour obtenir l'ordre souhaité sur des écrans plus grands. Par exemple :

<code class="html"><div class="row">
  <div class="col-xs-12 col-sm-6 col-sm-push-6">
    <p>test2</p>
  </div>

  <div class="col-xs-12 col-sm-6 col-sm-pull-6">
    <p>test1</p>
  </div>
</div></code>
Copier après la connexion

2. Utilisation des transformations CSS pour inverser l'ordre des colonnes sur mobile :

Appliquez le CSS suivant pour inverser l'ordre des colonnes empilées verticalement sur les appareils dotés d'une taille d'écran de 767 px ou moins :

<code class="css">@media (max-width: 767px) {
  .row.reorder-xs {
    transform: rotate(180deg);
    direction: rtl; /* Fix horizontal alignment */
  }

  .row.reorder-xs > [class*="col-"] {
    transform: rotate(-180deg);
    direction: ltr; /* Fix horizontal alignment */
  }
}</code>
Copier après la connexion

Notez que cette approche nécessite l'utilisation d'une classe HTML spécifique aux colonnes souhaitées à réorganiser.

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