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

Système de grille Bootstrap : surmonter l'empilement de colonnes avec des wrappers fixes

Le système de grille Bootstrap est un composant fondamental dans la conception Web pour créer des mises en page réactives. Cependant, lorsque vous utilisez un conteneur à largeur fixe, les colonnes de la grille peuvent s'empiler verticalement dans des tailles de navigateur plus petites.

Le problème :

Lors de l'utilisation d'un wrapper à largeur fixe dans Bootstrap 3, les colonnes de la grille s'effondreront et s'empileront les unes sur les autres lorsque la fenêtre du navigateur sera redimensionnée, même si le wrapper lui-même reste de la même taille.

La solution : utiliser des classes non empilables

Pour empêcher les colonnes de s'empiler dans des conteneurs à largeur fixe, Bootstrap fournit un ensemble de classes « non empilables ». Ces classes utilisent des requêtes multimédias pour remplacer le comportement d'empilement par défaut à des résolutions d'écran spécifiques.

Dans Bootstrap 3, les classes non empilables sont préfixées par col-xs-. Ces classes peuvent être appliquées aux colonnes pour les empêcher de s'effondrer sur des tailles d'écran plus petites.

Exemple :

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

Dans cet exemple, les colonnes resteront latérales. à côté même sur les plus petites tailles d'écran.

Mise à jour de Bootstrap 4 :

Dans Bootstrap 4, le concept de classes non empilables a été simplifié. Le préfixe xs n'est plus requis. Au lieu de cela, le comportement par défaut consiste à empêcher l’empilement des colonnes. Pour garantir que les colonnes restent côte à côte, utilisez simplement les classes col standard (par exemple, col-4).

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!