Comment empêcher les colonnes de la grille Bootstrap de s'empiler dans un conteneur à largeur fixe ?

Comment empêcher l'empilement dans la grille Bootstrap avec un wrapper fixe

Dans Bootstrap, le système de grille permet aux colonnes de s'empiler de manière réactive en fonction de la largeur de la fenêtre d'affichage . Cependant, ce comportement peut être indésirable dans certains scénarios, par exemple lors de l'utilisation d'un conteneur à largeur fixe.

Pour empêcher les colonnes de s'empiler dans un conteneur à largeur fixe, il est nécessaire d'utiliser des classes non empilables.

Utilisation de col-xs-* pour Bootstrap 3

Dans Bootstrap 3, la classe col-xs-* doit être utilisée pour définir des colonnes qui ne s'empileront pas. Le point d'arrêt xs (très petit) représente la plus petite taille d'écran et est utilisé pour contrôler le comportement dans les résolutions les plus extrêmes.

Par exemple :

<code class="html"><div class="container-fixed">
  <div class="row">
    <div class="col-xs-4">.col-xs-4</div>
    <div class="col-xs-4">.col-xs-4</div>
    <div class="col-xs-4">.col-xs-4</div>
  </div>
</div></code>

Utilisation de col-* pour Bootstrap 4

Dans Bootstrap 4, la classe col-xs-* n'est plus requise. Au lieu de cela, la classe col-* sans préfixe de point d'arrêt peut être utilisée directement pour définir des colonnes non empilables :

<code class="html"><div class="container-fluid">
  <div class="row">
    <div class="col-4">.col-4</div>
    <div class="col-4">.col-4</div>
    <div class="col-4">.col-4</div>
  </div>
</div></code>

Implémentation

En incorporant les éléments non-empilables appropriés. en empilant les classes dans le système de grille, vous pouvez efficacement empêcher les colonnes de s'empiler lorsque la fenêtre du navigateur est redimensionnée, garantissant ainsi que la disposition reste intacte dans le conteneur à largeur fixe.

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!