Comment empêcher les colonnes de la grille Bootstrap de s'empiler avec un wrapper fixe ?

Utiliser des classes de colonnes non empilables pour la grille Bootstrap avec un wrapper fixe

Lors de l'utilisation du système de grille de Bootstrap avec un wrapper fixe, il est possible d'empêcher les colonnes de s'empiler verticalement lorsque le Le navigateur est redimensionné.

Pour y parvenir, utilisez les classes non-empilables col-xs-* spécialement conçues pour les petits écrans. Ces classes remplacent le comportement réactif par défaut et garantissent que les colonnes restent côte à côte dans le wrapper fixe.

<code class="html"><div class="container">
  <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>

Démo : http://bootply.com/80085

Remarque pour Bootstrap 4 :

Dans Bootstrap 4, le préfixe xs n'est plus nécessaire pour les colonnes non empilables. Utilisez simplement la classe col-* pour obtenir l'effet souhaité.

<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>

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!