Comment remplacer la limite de 12 colonnes consécutives de Bootstrap 3 ?

Bootstrap 3 : résoudre les limitations de colonnes dans les lignes

Le comportement par défaut de Bootstrap 3 limite le nombre de colonnes dans une ligne à 12, ce qui provoque des problèmes lorsque tenter de dépasser cette limite. Cela peut se produire lors de l'ajout dynamique de plusieurs blocs de contenu, entraînant un chevauchement indésirable.

Remplacer le comportement de Bootstrap

Pour résoudre cette contrainte, une classe personnalisée peut être créée pour remplacer Le comportement par défaut de Bootstrap et autorise plus de 12 colonnes d'affilée. Cette classe peut être appliquée au conteneur .row.

Considérations relatives à la réactivité

Bien que plus de 12 colonnes soient autorisées dans une seule ligne, il est essentiel de prendre en compte la réactivité. Bootstrap utilise le retour à la ligne des colonnes pour garantir que les colonnes restent alignées sur différentes tailles d'écran.

Exemple de code

Le code suivant démontre l'implémentation de la classe personnalisée, garantissant que les colonnes flottent correctement même en cas de dépassement de 12 unités d'affilée :

<code class="css">.large-group .col-xs-12 {
  float: left;
}

@media (min-width: 768px) {
  .large-group .col-sm-12 {
    float: left;
  }
}

@media (min-width: 992px) {
  .large-group .col-md-12 {
    float: left;
  }
}

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

Exemple de balisage

Le balisage suivant démontre l'utilisation de la classe personnalisée :

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

Avantages

L'utilisation de cette approche offre :

• Flexibilité pour s'adapter à différentes mises en page de contenu.
• Réactivité améliorée qui s'adapte dynamiquement aux différentes tailles d'écran .

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!