Comment remplacer le comportement flottant des colonnes de Bootstrap pour plus de 12 colonnes consécutives ?

Remplacer le comportement flottant des colonnes de Bootstrap pour un nombre de colonnes illimité

Bootstrap 3 impose un nombre maximum de colonnes de 12 d'affilée, mais parfois vous pouvez il faut en utiliser davantage. Par défaut, les colonnes d'une largeur de 12 unités (col-xs-12, col-sm-12, etc.) ne flottent pas, ce qui peut interférer avec les autres colonnes flottantes de la même ligne.

À adresser Ceci, une classe de remplacement peut être appliquée pour permettre à n'importe quel nombre de colonnes de flotter correctement.

<code class="css">/* col-xs float fix for large column groups */
.large-group .col-xs-12 {
  float: left;
}

/* col-sm float fix for large column groups */
@media (min-width: 768px) {
  .large-group .col-sm-12 {
    float: left;
  }
}

/* col-md float fix for large column groups */
@media (min-width: 992px) {
  .large-group .col-md-12 {
    float: left;
  }
}

/* col-lg float fix for large column groups */
@media (min-width: 1200px) {
  .large-group .col-lg-12 {
    float: left;
  }
}</code>

Ce remplacement garantit que toutes les colonnes des lignes avec la classe "grand groupe" flotteront, quelle que soit leur largeur. .

Exemple d'utilisation :

<code class="html"><div class="container">
  <div class="row large-group" style="background-color:#ebebeb;">
    <div class="col-xs-9"><div style="background-color:#babeee;"><p>col 9</p></div></div>
    <div class="col-xs-3"><div style="background-color:#fefeeb;"><p>col 3</p></div></div>
    <div class="col-xs-12"><div style="background-color:#bada55;"><p>col 12</p></div></div>
  </div>
</div></code>

Bien qu'il ne soit généralement pas recommandé de contourner les principes de conception de Bootstrap, cette substitution permet une plus grande flexibilité dans la création de mises en page riches en contenu.

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!