Comment étendre Bootstrap 3 lignes au-delà de la limite de 12 colonnes ?

Personnalisation de Bootstrap 3 pour dépasser la limite de 12 colonnes dans les lignes

Problème

Par défaut, Bootstrap 3 force les colonnes de plus de 12 unités à s'empiler verticalement en raison de leur comportement "float: none". Cette limitation peut entraver les mises en page dynamiques dans lesquelles plusieurs blocs de contenu peuvent être ajoutés à une ligne.

Solution

Pour briser cette restriction, vous pouvez appliquer des remplacements CSS personnalisés pour remplacer le comportement de Bootstrap et permettre aux lignes de s'adapter plus de 12 colonnes. Voici comment :

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

Exemple d'implémentation

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

Rationalisation

Bien que le comportement par défaut de Bootstrap garantisse que les lignes restent visuellement cohérentes, il n'est pas toujours adapté aux dynamiques ou aménagements limités en espace. Cette personnalisation permet une plus grande flexibilité et réactivité dans de telles situations.

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!