Maison > interface Web > tutoriel CSS > Comment réorganiser différemment les colonnes Bootstrap pour les vues de bureau et mobiles ?

Comment réorganiser différemment les colonnes Bootstrap pour les vues de bureau et mobiles ?

Susan Sarandon
Libérer: 2024-12-07 12:22:12
original
413 Les gens l'ont consulté

How to Reorder Bootstrap Columns Differently for Desktop and Mobile Views?

Empilage des colonnes Bootstrap dans un ordre différent sur mobile

Dans Bootstrap 4, la disposition des colonnes peut être un peu difficile à personnaliser lors du basculement entre les vues de bureau et mobiles. Abordons un scénario particulier : vous avez deux colonnes et une ligne imbriquée dans la colonne de droite. Votre objectif est de rendre la mise en page réactive de telle sorte qu'elle s'affiche comme suit :

Version de bureau :

--------- ------
|   2   ||  1  |
|       ||     |
|       |-------
|       ||  3  |
|       ||     |
|       |-------
|       |
|       |
---------
Copier après la connexion

Version mobile (empilée dans l'ordre) :

--------
|  1   |
|      |
--------
|  2   |
|      |
|      |
|      |
|      |
|      |
--------
|  3   |
|      |
--------
Copier après la connexion

Utilisation des flotteurs et désactivation de Flexbox

La valeur par défaut La disposition flexbox dans Bootstrap 4 garantit une hauteur égale pour les colonnes. Pour obtenir la disposition de bureau souhaitée, vous pouvez désactiver flexbox pour les grands écrans et utiliser des flotteurs à la place :

<div class="container">
    <div class="row d-flex d-lg-block">
         <div class="col-lg-8 order-1 float-left">
            <div class="card card-body tall">2</div>
        </div>
        <div class="col-lg-4 order-0 float-left">
            <div class="card card-body">1</div>
        </div>
        <div class="col-lg-4 order-1 float-left">
            <div class="card card-body">3</div>
        </div>
    </div>
</div>
Copier après la connexion

Utilisation de Flexbox Wrapping Hack

Vous pouvez également utiliser un hack d'emballage flexbox qui utilise w -auto :

<div class="container">
    <div class="row">
         <div class="col-lg-8 order-1">
            <div class="card card-body">2</div>
        </div>
        <div class="col-lg-4 order-0">
            <div class="card card-body w-auto">1</div>
        </div>
        <div class="col-lg-4 order-1">
            <div class="card card-body w-auto">3</div>
        </div>
    </div>
</div>
Copier après la connexion

Considérations

Les deux approches ont leurs propres avantages et inconvénients. La méthode float est plus simple mais peut entraîner des problèmes d'alignement et de réactivité. Le hack d'emballage offre une meilleure réactivité mais nécessite un CSS plus complexe.

Ressources supplémentaires

  • [Comment corriger l'ordre inattendu des colonnes dans bootstrap 4 ?](...)
  • [Hauteur des colonnes réactives Bootstrap](...)
  • B-A-C -> ABC

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