Después de observar en diversos repositorios y páginas webs al final encontramos la solución que te compartimos pronto.
Solución:
Bueno, en mi opinión, probablemente necesite anular el width de las columnas usando CSS3 @media consulta.
Aquí está mi intento de crear un sistema de cuadrícula de 7 columnas:
Col 1
Col 2
Col 3
Col 4
Col 5
Col 6
Col 7
@media (min-width: 768px)
.seven-cols .col-md-1,
.seven-cols .col-sm-1,
.seven-cols .col-lg-1
width: 100%;
*width: 100%;
@media (min-width: 992px)
.seven-cols .col-md-1,
.seven-cols .col-sm-1,
.seven-cols .col-lg-1
width: 14.285714285714285714285714285714%;
*width: 14.285714285714285714285714285714%;
/**
* The following is not really needed in this case
* Only to demonstrate the usage of @media for large screens
*/
@media (min-width: 1200px)
.seven-cols .col-md-1,
.seven-cols .col-sm-1,
.seven-cols .col-lg-1
width: 14.285714285714285714285714285714%;
*width: 14.285714285714285714285714285714%;
El valor de width viene de:
width = 100% / 7 column-number = 14.285714285714285714285714285714%
DEMO DE TRABAJO – (jsbin)
Ejecute el fragmento de código y haga clic en “Página completa”.
.col-md-1
background-color: gold;
@media (min-width: 768px)
.seven-cols .col-md-1,
.seven-cols .col-sm-1,
.seven-cols .col-lg-1
width: 100%;
*width: 100%;
@media (min-width: 992px)
.seven-cols .col-md-1,
.seven-cols .col-sm-1,
.seven-cols .col-lg-1
width: 14.285714285714285714285714285714%;
*width: 14.285714285714285714285714285714%;
@media (min-width: 1200px)
.seven-cols .col-md-1,
.seven-cols .col-sm-1,
.seven-cols .col-lg-1
width: 14.285714285714285714285714285714%;
*width: 14.285714285714285714285714285714%;
Col 1
Col 2
Col 3
Col 4
Col 5
Col 6
Col 7
Otras opciones
Además, puede crear su propia versión de 7 columnas de Twitter Bootstrap utilizando el Constructor personalizado (Cambiando el @grid-columns…).
Si estás usando menos compilador, puede descargar el menos versión de Twitter Bootstrap (de Github) y edite el variables.less archivo en su lugar.
Un casi igual, rápido solución. Sin css personalizado.
.cell
border: 1px solid black;
text-align: center;
flex-basis: 33.3333%;
flex-grow: 0;
flex-shrink: 0;
-webkit-box-flex: 0;
-webkit-tap-highlight-color: #0000;
1
2
3
4
5
6
7
Actualizar a Bootstrap 4 es probablemente una buena opción.
Viene con una columna de clase para columnas de igual ancho
https://v4-alpha.getbootstrap.com/layout/grid/#equal-width
Sugerencias: si desea dividir columnas en nuevas líneas cuando la pantalla es más baja que md, agregue este div después de cada columna:
.w-100 se divide en una nueva línea y .d-md-done oculta el div en pantallas más anchas que md
Entonces daría:
valoraciones y comentarios
Si eres capaz, eres capaz de dejar un post acerca de qué le añadirías a este ensayo.