Cinco columnas iguales en Twitter Bootstrap
Quiero tener 5 columnas iguales en una página que estoy construyendo y parece que 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
¿La cuadrícula de cinco columnas que se muestra arriba es parte del marco de arranque de Twitter?
Para arranque 4
Bootstrap 4 ahora usa flexbox de forma predeterminada, por lo que obtienes acceso a sus poderes mágicos nada más sacarlo de la caja. Consulte las columnas de diseño automático que ajustan dinámicamente el ancho según cuántas columnas están anidadas.
He aquí un ejemplo:
<div class="row">
<div class="col">
1 of 5
</div>
<div class="col">
2 of 5
</div>
<div class="col">
3 of 5
</div>
<div class="col">
4 of 5
</div>
<div class="col">
5 of 5
</div>
</div>
DEMOSTRACIÓN DE TRABAJO
Para arranque 3
Aquí se creó un fantástico diseño de 5 columnas de ancho completo con Twitter Bootstrap .
Esta es, con diferencia, la solución más avanzada, ya que funciona perfectamente con Bootstrap 3. Le permite reutilizar las clases una y otra vez, junto con las clases Bootstrap actuales para un diseño responsivo.
CSS:
agregue esto a su hoja de estilo global, o incluso al final de su bootstrap.cssdocumento.
.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 en práctica!
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:
<div class="row">
<div class="col-md-5ths col-xs-6">
...
</div>
</div>
DEMOSTRACIÓN DE TRABAJO : expanda el marco para ver cómo las columnas responden.
OTRA DEMO - Incorporando las nuevascol-*-5thsclases con otras comocol-*-3ycol-*-2. Cambie el tamaño del marco para verlos todos cambiar acol-xs-6una vista responsiva.
Utilice cinco divs con una clase de span2 y asigne al primero una clase de offset1.
<div class="row-fluid">
<div class="span2 offset1"></div>
<div class="span2"></div>
<div class="span2"></div>
<div class="span2"></div>
<div class="span2"></div>
</div>
¡Voilá! Cinco columnas equiespaciadas y centradas.
En bootstrap 3.0, este código se vería así
<div class="row">
<div class="col-md-2 col-md-offset-1"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
</div>
ACTUALIZAR
Dado que bootstrap 4.0 usa Flexbox de forma predeterminada:
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
Para Bootstrap 3 , si desea ancho completo y está usando LESS, SASSo algo similar, todo lo que tiene que hacer es utilizar las funciones mixin de Bootstrap make-md-column , make-sm-columnetc.
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 puede crear verdaderas clases de columnas de arranque de ancho completo utilizando estos mixins, sino que también puede crear 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 de una configuración @gridColumnsque es perfectamente válida, pero que cambia el ancho de la columna principal para todo el bootstrap. El uso de las funciones mixin anteriores agregará un diseño de 5 columnas encima de las columnas de arranque predeterminadas, por lo que no dañará ninguna herramienta de terceros ni el estilo existente.
Bootstrap 5+ (actualización 2023)
Bootstrap 5 ahora tiene row-cols-*clases que facilitan la obtención de 5 columnas...
<div class="row row-cols-5">
<div class="col"> </div>
<div class="col"> </div>
<div class="col"> </div>
<div class="col"> </div>
...
</div>
Manifestación
Bootstrap 4.1+ (actualización 2019)
Aquí hay 5 columnas iguales de ancho completo ( sin CSS ni SASS adicionales ) que utilizan la cuadrícula de diseño automático :
<div class="container-fluid">
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
<div class="col">5</div>
</div>
</div>
http://codeply.com/go/MJTglTsq9h
Esta solución funciona porque Bootstrap 4 ahora es flexbox. Puede hacer que las 5 columnas se ajusten dentro de la misma .rowusando un salto como <div class="col-12"></div>o <div class="w-100"></div>cada 5 columnas.
Ver también: Bootstrap: diseño de 5 columnas
A continuación se muestra una combinación de respuestas de @machineaddict y @Mafnah, reescritas para Bootstrap 3 (hasta ahora me funciona bien):
@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%;
}
}
