Personalizar Bootstrap 3 para romper el límite de 12 columnas en filas

Problema

De forma predeterminada, Bootstrap 3 fuerza a las columnas de más de 12 unidades a apilarse verticalmente debido a su comportamiento "flotación: ninguno". Esta limitación puede obstaculizar los diseños dinámicos en los que se pueden agregar múltiples bloques de contenido a una fila.

Solución

Para romper esta restricción, puede aplicar anulaciones de CSS personalizadas para anular el comportamiento de Bootstrap y permitir que las filas se adapten más de 12 columnas. Aquí se explica cómo:

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

Ejemplo de implementación

  

    
col 9
    
col 3
    
col 12
  

Racionalización

Aunque el comportamiento predeterminado de Bootstrap garantiza que las filas permanezcan visualmente consistentes, es posible que no siempre sea adecuado para diseños dinámicos o con espacio limitado. Esta personalización permite una mayor flexibilidad y capacidad de respuesta en tales situaciones.