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 :

/* 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;
  }
}

Exemple d'implémentation

  

    
col 9
    
col 3
    
col 12
  

Rationalisation

Bien que le comportement par défaut de Bootstrap garantisse que les lignes restent visuellement cohérentes, il peut ne pas toujours être adapté aux mises en page dynamiques ou limitées en espace. Cette personnalisation permet une plus grande flexibilité et réactivité dans de telles situations.