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 | | || | | |------- | | | | ---------
Version mobile (empilée dans l'ordre) :
-------- | 1 | | | -------- | 2 | | | | | | | | | | | -------- | 3 | | | --------
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>
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>
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.
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!