Bootstrap 3: use más de 12 columnas en una fila

Me encontré con una situación en la que se me exigía no limitar el número de columnas seguidas, ya que se agregarían bloques de contenido potencialmente múltiples al área desde lugares en el administrador.

Por defecto, el comportamiento de BS3 le dice a 12 divisiones de columna que no floten, lo que hace que pasen a la parte superior de los divs flotantes más pequeños. Así que escribí una anulación como clase para mi sistema y pensé que la compartiría en caso de que alguien más tenga el problema.

Si alguien tiene una idea o sugerencia mejor, me gustaría sentir que no estoy pirateando Bootstrap … pero así es como lo resolví.

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

col 9

col 3

col 12

No hay nada de malo con el uso de más de 12 unidades de columna en .row , y de hecho el estado de los documentos Bootstrap:

“Si se colocan más de 12 columnas dentro de una sola fila, cada grupo de columnas adicionales se ajustará, como una unidad, a una nueva línea”

También hay ejemplos en los documentos que demuestran por qué este “ajuste de columna” es necesario: https://getbootstrap.com/docs/3.3/css/#grid-example-wrapping . Está bien tener más de 12 unidades en un solo .row. etiqueta, solo recuerde que es posible que necesite usar reinicios reactivos. 12 unidades es un límite de la fila visual (horizontalmente a través de la ventana .row ), pero no necesariamente un .row div que es simplemente una agrupación de columnas.

Lea más sobre la grilla de Bootstrap y por qué a menudo es necesario más de 12 en una fila .

Bootstrap se hizo para un uso de 12 columnas.

Si desea tener más columnas, debe definir su cuadrícula de respuesta personalizada, con la ayuda de menos variables de Bootstrap ( consulte aquí ). Necesitarás principalmente cambiar estas variables:

  • @grid-columns : Número de columnas en la grilla.
  • @grid-gutter-width Relleno entre columnas. Se divide a la mitad para la izquierda y la derecha.

Si necesita flexibilidad y capacidad de respuesta con un gran número de cuadrículas, puede utilizar la cuadrícula de URL simple: https://github.com/mourner/dead-simple-grid y también tratar de minimizar el uso de consultas de medios en grillas y dejar fluir con

 max-width:100%; float:left;