Cinco columnas iguales en twitter bootstrap

Quiero tener 5 columnas iguales en una página que estoy construyendo y no puedo entender cómo se usa la cuadrícula de 5 columnas aquí: http://web.archive.org/web/20120416024539/http://domain7 .com / mobile / tools / bootstrap / responsive

¿Se muestra la cuadrícula de cinco columnas arriba de Twitter framework?

Usa cinco divs con una clase de span2 y dale a la primera clase de offset1.

Voila! Cinco columnas igualmente espaciadas y centradas.


En bootstrap 3.0, este código se vería como

 

Para Bootstrap 3 y superior

Aquí se creó un diseño fantástico de 5 columnas con Twitter Bootstrap.

Esta es, de lejos, la solución más avanzada, ya que funciona a la perfección con Bootstrap 3. Le permite reutilizar las clases una y otra vez, junto con las clases actuales de Bootstrap para un diseño receptivo.

CSS:
Agregue esto a su hoja de estilo global, o incluso a la parte inferior de su documento bootstrap.css .

 .col-xs-5ths, .col-sm-5ths, .col-md-5ths, .col-lg-5ths { position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px; } .col-xs-5ths { width: 20%; float: left; } @media (min-width: 768px) { .col-sm-5ths { width: 20%; float: left; } } @media (min-width: 992px) { .col-md-5ths { width: 20%; float: left; } } @media (min-width: 1200px) { .col-lg-5ths { width: 20%; float: left; } } 

¡Ponlo a usar!
Por ejemplo, si desea crear un elemento div que se comporte como un diseño de cinco columnas en pantallas medianas y como dos columnas en pantallas más pequeñas, solo necesita usar algo como esto:

 
...

DEMO DE TRABAJO – Expanda el marco para ver que las columnas sean receptivas.

OTRA DEMO – Incorporación de las nuevas clases col-*-5ths con otras como col-*-3 y col-*-2 . Cambie el tamaño del marco para ver cómo todos cambian a col-xs-6 en la vista de respuesta.


Para Bootstrap 4

Bootstrap 4 ahora usa flexbox de forma predeterminada, por lo que puede acceder a sus poderes mágicos directamente de la caja. Consulte las columnas de diseño automático que ajustan el ancho de forma dinámica según la cantidad de columnas anidadas.

Aquí hay un ejemplo:

 
1 of 5
2 of 5
3 of 5
4 of 5
5 of 5

DEMO DE TRABAJO

Para Bootstrap 3 , si desea ancho completo y utiliza LESS , SASS o algo similar, todo lo que tiene que hacer es usar las funciones de mezcla de Bootstrap make-md-column , make-sm-column , etc.

MENOS:

 .col-lg-2-4{ .make-lg-column(2.4) } .col-md-2-4{ .make-md-column(2.4) } .col-sm-2-4{ .make-sm-column(2.4) } 

HABLAR CON DESCARO A:

 .col-lg-2-4{ @include make-lg-column(2.4) } .col-md-2-4{ @include make-md-column(2.4) } .col-sm-2-4{ @include make-sm-column(2.4) } 

No solo puedes construir clases de columna de bootstrap de ancho completo usando estas mixins, sino que también puedes construir todas las clases auxiliares relacionadas como .col-md-push-* , .col-md-pull-* y .col-md-offset-* :

MENOS:

 .col-md-push-2-4{ .make-md-column-push(2.4) } .col-md-pull-2-4{ .make-md-column-pull(2.4) } .col-md-offset-2-4{ .make-md-column-offset(2.4) } 

HABLAR CON DESCARO A:

 .col-md-push-2-4{ @include make-md-column-push(2.4) } .col-md-pull-2-4{ @include make-md-column-pull(2.4) } .col-md-offset-2-4{ @include make-md-column-offset(2.4) } 

Otras respuestas hablan sobre la configuración de @gridColumns que es perfectamente válida, pero eso cambia el ancho de la columna central de todo el bootstrap. Al usar las funciones de mezcla anteriores, se agregará un diseño de 5 columnas en la parte superior de las columnas predeterminadas de arranque, para que no rompa ninguna herramienta de terceros o el estilo existente.

A continuación se muestra un conjunto de respuestas de @machineaddict y @Mafnah, reescrito para Bootstrap 3 (me funciona bien hasta ahora):

 @media (min-width: 768px){ .fivecolumns .col-md-2, .fivecolumns .col-sm-2, .fivecolumns .col-lg-2 { width: 20%; *width: 20%; } } @media (min-width: 1200px) { .fivecolumns .col-md-2, .fivecolumns .col-sm-2, .fivecolumns .col-lg-2 { width: 20%; *width: 20%; } } @media (min-width: 768px) and (max-width: 979px) { .fivecolumns .col-md-2, .fivecolumns .col-sm-2, .fivecolumns .col-lg-2 { width: 20%; *width: 20%; } } 

Mantenga el bootstrap original con 12 columnas, no lo personalice. La única modificación que necesita hacer es un css después del css original de arranque, como este:

El siguiente código ha sido probado para Bootstrap 2.3.2:

  

Y el html:

 

Heading

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

View details »

Heading

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

View details »

Heading

Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

View details »

Heading

Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

View details »

Heading

Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

View details »

Nota: A pesar de que span2 multiplicado por 5 no es igual a 12 columnas, se entiende la idea 🙂

Un ejemplo de trabajo se puede encontrar aquí http://jsfiddle.net/v3Uy5/6/

Actualización 2018

Bootstrap 4.0

Aquí hay 5 columnas iguales de ancho completo ( sin CSS ni SASS ) usando la cuadrícula de diseño automático :

 
1
2
3
4
5

http://www.codeply.com/go/MJTglTsq9h

Esta solución funciona porque Bootstrap 4 ahora es Flexbox. Puede obtener las 5 columnas para .row dentro del mismo .row usando un breakfix break como

o

cada 5 columnas

Ver también: Bootstrap – diseño de 5 columnas

Cree una descarga de Bootstrap personalizada para el diseño de 5 columnas

Vaya a la página de personalización de Bootstrap 2.3.2 (o Bootstrap 3 ) y configure las siguientes variables (no ingrese punto y coma):

 @gridColumns: 5; @gridColumnWidth: 172px; @gridColumnWidth1200: 210px; @gridColumnWidth768: 128px; @gridGutterWidth768: 21px; 

Descargue su comstackción. Esta grilla podría caber en contenedores predeterminados, conservando anchos de canal predeterminados (casi).

Nota: Si está utilizando LESS, actualice variables.less lugar.

En caso de que no necesite exactamente el mismo ancho de columnas, puede intentar crear 5 columnas usando el anidamiento:

 
Column 1
Column 2
Column 3
Column 4
Column 5

jsfiddle

Las primeras dos columnas tendrán un ancho igual a 5/12 * 1/2 ~ 20.83%

Las últimas tres columnas: 7/12 * 1/3 ~ 19.44%

Tal hack proporciona el resultado aceptable en muchos casos y no requiere ningún cambio de CSS (estamos utilizando solo las clases de arranque nativas).

He votado la respuesta de Mafnah, pero mirando de nuevo sugiero que lo siguiente es mejor si mantienes los márgenes predeterminados, etc.

 
.equal .span2 { width: 17.9%; }

Con flexbox http://output.jsbin.com/juziwu

 .flexrow { display: flex; background: lightgray; /*for debug*/ } .flexrow > * { flex: 1; margin: 1em; outline: auto green; } 
 
...
...
...
...
..
...
 
.equal .span2 { width: 20%; }

Cree 5 elementos con la clase col-sm-2 y agregue al primer elemento también la clase col-sm-offset-1

Ps esto no será de ancho completo (se sangrará un poco desde la derecha e izquierda de la pantalla)

El código debería verse algo como esto

 

Otra forma de habilitar 5 columnas en Bootstrap 3 es modificar el formato de 12 columnas utilizado por defecto por Bootstrap. Y luego crea una cuadrícula de 20 columnas (usa personalizar en el sitio web de Bootstrap O utiliza la versión LESS / SASS).

Para personalizar en el sitio web de arranque, vaya a la página Personalizar y descargar , actualice variables @grid-columns de 12 a 20 . Entonces podrá crear 4 y 5 columnas.

Se puede hacer anidando y usando un poco de css over-ride.

 
Column 1
Column 2
Column 3
Col 4
Col 5

Entonces algunos css

 @media (min-width: 768px) { div.col-sm-7.five-three { width: 60% !important; } div.col-sm-5.five-two { width: 40% !important; } 

}

Aquí hay un ejemplo: 5 ejemplos de columnas iguales

Y aquí está mi completa redacción en coderwall

Cinco columnas iguales en bootstrap 3

En mi opinión, es mejor usarlo así con menos syntax. Esta respuesta se basa en la respuesta de @fizzix

De esta forma, las columnas usan variables (@ grid-gutter-width, media breakpoints) que el usuario puede haber anulado y el comportamiento de las cinco columnas coincide con el comportamiento de 12 columnas.

 /* * Special grid for ten columns, * using its own scope * so it does not interfere with the rest of the code */ & { @import (multiple) "../bootstrap-3.2.0/less/variables.less"; @grid-columns: 5; @import (multiple) "../bootstrap-3.2.0/less/mixins.less"; @column: 1; .col-xs-5ths { .make-xs-column(@column); } .col-sm-5ths { .make-sm-column(@column); } .col-md-5ths { .make-md-column(@column); } .col-lg-5ths { .make-lg-column(@column); } } /***************************************/ /* Using default bootstrap now /***************************************/ @import (multiple) "../bootstrap-3.2.0/less/variables.less"; @import (multiple) "../bootstrap-3.2.0/less/mixins.less"; /* ... your normal less definitions */ 

Esto es increíble: http://www.ianmccullough.net/5-column-bootstrap-layout/

Solo haz:

 

Y CSS:

 .col-xs-15{ width:20%; } 

De manera predeterminada, Bootstrap no proporciona un sistema de cuadrícula que nos permita crear un diseño de cinco columnas, debe crear una definición de columna predeterminada en la forma en que Bootstrap crea algunas clases personalizadas y consultas de medios en su archivo CSS.

 .col-xs-15, .col-sm-15, .col-md-15, .col-lg-15 { position: relative; min-height: 1px; padding-right: 10px; padding-left: 10px; } .col-xs-15 { width: 20%; float: left; } @media (min-width: 768px) { .col-sm-15 { width: 20%; float: left; } } @media (min-width: 992px) { .col-md-15 { width: 20%; float: left; } } @media (min-width: 1200px) { .col-lg-15 { width: 20%; float: left; } } 

y algún código html

 
...

Una solución que no requiere una gran cantidad de CSS, ni ajustar el diseño predeterminado de bootstrap 12col:

http://jsfiddle.net/0ufdyeur/1/

HTML:

 

CSS:

 @media (min-width: 1200px) { /*if not lg, change this criteria*/ .stretch{ width: 120%; /*the actual trick*/ } } 

En bootstrap 3, creo que podemos hacer algo como eso, para eliminar el margen izquierdo y derecho:

 

y CSS

 .this_row { margin: 0 -5%; } 

Cómo se puede agregar una cuadrícula de 5 columnas en bootstrap

 .col-lg-1-5,.col-md-1-5,.col-sm-1-5,.col-xs-1-5{min-height:1px;padding-left:15px;padding-right:15px;position:relative; width:100%;box-sizing:border-box;} .item{width:100%;height:100px; background-color:#cfcfcf;} .col-xs-1-5{width: 20%;float:left;} } @media (min-width: 767px){ .col-sm-1-5{width: 20%;float:left;} } @media (min-width: 992px){ .col-md-1-5{width: 20%;float:left;} } @media (min-width: 1200px){ .col-lg-1-5{width: 20%;float:left;} } 
 
Item 1
Item 2
Item 3
Item 4
Item 5

Bootstrap por defecto puede escalar hasta 12 columnas? Esto significa que si queremos crear un diseño de 12 columnas de igual ancho, escribiríamos dentro de div class = “col-md-1” doce veces.

 
1
2
3
4
5

la solución más sencilla sin necesidad de editar CSS sería:

 
Column 1
Column 2
Column 3
Column 4
Column 5

Y si necesita que esos rompan más allá de cualquier punto de interrupción, solo haga bloque de btn-group. Espero que esto ayude a alguien.

Evidentemente, cinco columnas no forman parte del bootstrap por diseño.

Pero con Bootstrap v4 (alfa), hay dos cosas para ayudar con un diseño de cuadrícula complicado

  1. Flex ( http://v4-alpha.getbootstrap.com/getting-started/flexbox/ ), el nuevo tipo de elemento (oficial – https://www.w3.org/TR/css-flexbox-1/ )
  2. Utilidades de respuesta ( http://v4-alpha.getbootstrap.com/layout/responsive-utilities/ )

En términos simples, estoy usando

   

Ya sea 5,7,9,11,13 o algo así, todo estará bien. Estoy bastante seguro de que el estándar de 12 rejillas puede servir más del 90% de las cajas de uso, así que diseñemos de esa manera, ¡también desarrolle más fácilmente!

El buen tutorial flexible está aquí ” https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Creé las definiciones de mezcla de SASS basadas en las definiciones de arranque para cualquier cantidad de columnas (personalmente, junto a 12, uso 8, 10 y 24):

 // Extended bootstrap grid system // // Framework grid generation // // Based on Bootstrap 'bootstrap/_grid-framework.scss'. Generates classes in form of `.col-(size)-x-num` of width x/num. @mixin make-extended-grid-columns($num-columns, $i: 1, $list: ".col-xs-#{$i}-#{$num-columns}, .col-sm-#{$i}-#{$num-columns}, .col-md-#{$i}-#{$num-columns}, .col-lg-#{$i}-#{$num-columns}") { @for $i from (1 + 1) through $num-columns { $list: "#{$list}, .col-xs-#{$i}-#{$num-columns}, .col-sm-#{$i}-#{$num-columns}, .col-md-#{$i}-#{$num-columns}, .col-lg-#{$i}-#{$num-columns}"; } #{$list} { position: relative; min-height: 1px; padding-left: ($grid-gutter-width / 2); padding-right: ($grid-gutter-width / 2); } } @mixin float-extended-grid-columns($class, $num-columns, $i: 1, $list: ".col-#{$class}-#{$i}-#{$num-columns}") { @for $i from (1 + 1) through $num-columns { $list: "#{$list}, .col-#{$class}-#{$i}-#{$num-columns}"; } #{$list} { float: left; } } @mixin calc-extended-grid-column($index, $num-columns, $class, $type) { @if ($type == width) and ($index > 0) { .col-#{$class}-#{$index}-#{$num-columns} { width: percentage(($index / $num-columns)); } } @if ($type == push) and ($index > 0) { .col-#{$class}-push-#{$index}-#{$num-columns} { left: percentage(($index / $num-columns)); } } @if ($type == pull) and ($index > 0) { .col-#{$class}-pull-#{$index}-#{$num-columns} { right: percentage(($index / $num-columns)); } } @if ($type == offset) and ($index > 0) { .col-#{$class}-offset-#{$index}-#{$num-columns} { margin-left: percentage(($index / $num-columns)); } } } @mixin loop-extended-grid-columns($num-columns, $class, $type) { @for $i from 1 through $num-columns - 1 { @include calc-extended-grid-column($i, $num-columns, $class, $type); } } @mixin make-extended-grid($class, $num-columns) { @include float-extended-grid-columns($class, $num-columns); @include loop-extended-grid-columns($num-columns, $class, width); @include loop-extended-grid-columns($num-columns, $class, pull); @include loop-extended-grid-columns($num-columns, $class, push); @include loop-extended-grid-columns($num-columns, $class, offset); } 

Y puedes simplemente crear clases por:

 $possible-number-extended-grid-columns: 8, 10, 24; @each $num-columns in $possible-number-extended-grid-columns { // Columns @include make-extended-grid-columns($num-columns); // Extra small grid @include make-extended-grid(xs, $num-columns); // Small grid @media (min-width: $screen-sm-min) { @include make-extended-grid(sm, $num-columns); } // Medium grid @media (min-width: $screen-md-min) { @include make-extended-grid(md, $num-columns); } // Large grid @media (min-width: $screen-lg-min) { @include make-extended-grid(lg, $num-columns); } } 

Espero que alguien lo encuentre útil

Diseño de 5 columnas con estilo Twitter Bootstrap

 .col-xs-15 { position: relative; min-height: 1px; padding-right: 10px; padding-left: 10px; } .col-xs-15 { width: 100%; float: left; } @media (min-width: 768px) { .col-xs-15 { width: 50%; float: left; } } @media (min-width: 992px) { .col-xs-15 { width: 20%; float: left; } } @media (min-width: 1200px) { .col-xs-15 { width: 20%; float: left; } } 

Solo crea una nueva clase y define su comportamiento por cada consulta de medios según sea necesario

 @media(min-width: 768px){ .col-1-5{ width: 20%; float: left; position: relative; min-height: 1px; padding-right: 5px; padding-left: 5px; } } 
col 1
col 2
col 3
col 4
col 5

aquí hay una demostración en funcionamiento https://codepen.io/giorgosk/pen/BRVorW

Bootstrap 4, número variable de columnas por fila

Si desea tener hasta cinco columnas por fila, de modo que menos números de columnas aún ocupen solo 1/5 de la fila cada uno, la solución es usar las mixinas de Bootstrap 4:

SCSS:

 .col-2-4 { @include make-col-ready(); // apply standard column margins, padding, etc. @include make-col(2.4); // 12/5 = 2.4 } 

HTML:

 
1 of 5
2 of 5
3 of 5
4 of 5
5 of 5
1 of 2
2 of 2
 .col-xs-2-4 { position: relative; float: left; width: 20%; min-height: 1px; padding-left: 15px; padding-right: 15px; } .col-sm-2-4 { position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px; } @media (min-width: 768px) { .col-sm-2-4 { float: left; width: 20%; } } .col-md-2-4 { position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px; } @media (min-width: 992px) { .col-md-2-4 { float: left; width: 20%; } } .col-lg-2-4 { position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px; } @media (min-width: 1200px) { .col-lg-2-4 { float: left; width: 20%; } } 

Para twitter bootstrap 3 esta es la manera más simple de lograr esto:

 

Una improvisación en la respuesta de @ lightswitch, si necesitamos una cuadrícula de 5 columnas usando LESS iterations

 .make-fifth-col(@index) when (@index > 0) { @class-name: ~".col-md-5th-@{index}"; @{class-name} { .make-md-column(1.2*@index); } .make-fifth-col(@index - 1); } .make-fifth-col(10); 

Esto generará clases css .col-md-5th-1, col-md-5th-2, col-md-5th-3, y así sucesivamente, que corresponde al 10% , 20% , 30% … respectivamente