Cinco columnas iguales en twitter bootstrap


361

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 se muestra arriba de parte del marco de arranque de Twitter?


Estás viendo una versión muy antigua del bootstrap. ¿Está buscando tener una cuadrícula "receptiva" de 5 columnas en el arranque (más reciente, espero)?
Andres Ilich

3
Me acabo de dar cuenta de eso. El indicado es v1.3.0 y el actual es 2.0.2. La última versión es una cuadrícula de 12 columnas, lo que significa que puedo tener 2,3,4 y 6 columnas iguales. Lo que estaba preguntando es, si Sería posible tener 5 columnas iguales sin tener que cambiar muchas cosas.
Gandalf

puede, sí, pero requerirá grandes modificaciones en algunos de los elementos de la cuadrícula y también en los elementos de la cuadrícula receptiva. ¿Su sitio responde en absoluto? Sería un poco más fácil encontrar una respuesta de esa manera, de lo contrario sería mucho código.
Andres Ilich

Sí, el sitio responde pero también tendría que modificar los elementos de la cuadrícula, no solo la parte receptiva.
Gandalf

1
Estoy teniendo algo de éxito * con .container.one-5th.column {ancho: 17%; } aunque espero que algo horrible me deje sin aliento. 17.87847% también.
Gandalf

Respuestas:


407

Usa cinco divs con una clase de span2 y dale 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>

Voila! Cinco columnas igualmente espaciadas 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>

44
No va en todo el ancho. aunque es agradable
machineaddict

45
La solución que publiqué es de ancho completo y crea 5 columnas iguales: AQUÍ ESTÁ LA RESPUESTA .
Fizzix

55
No va de ancho completo como la respuesta que @fizzix proporciona a continuación. Hace un margen no deseado en ambos lados, así - jsfiddle.net/wdo8L1ww
Fizzix

3
Las columnas parecen bastante pequeñas con esta solución, por lo que prefiero la solución
@fizzix

2
Bootstrap 4 5 cols (ancho completo) no requiere CSS ni SASS: stackoverflow.com/a/42226652/171456
Zim

526

Para Bootstrap 3 y superior

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

Esta es, con mucho, 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 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;
    }
}

¡Póngalo en uso!
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>

DEMO DE TRABAJO : expanda el marco para ver que las columnas responden.

OTRA DEMO - Incorporando las nuevascol-*-5thsclases con otras comocol-*-3ycol-*-2. Cambie el tamaño del marco para verlos cambiar a todoscol-xs-6en una vista receptiva.


Para Bootstrap 4

Bootstrap 4 ahora usa flexbox por defecto, por lo que obtienes acceso a sus poderes mágicos directamente de la caja. Echa un vistazo a las columnas de diseño automático que ajustan dinámicamente el ancho dependiendo de cuántas columnas estén anidadas.

Aquí hay 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>

DEMO DE TRABAJO


1
Llamarlos col-*-15puede ser confuso. Parece implicar que son parte de un sistema de cuadrícula de 15 columnas, que no lo son.
Paul D. Waite

2
@ PaulD.Waite: agregué una pequeña nota a mi respuesta para informar a la gente.
Fizzix

2
col-*-15está bien conmigo, pero col-*-5thspodría ser un nombre de columna un poco menos confuso. Eso es lo que estoy usando para que mis otros desarrolladores no me confundan.
Mordred

3
Hola @scragar: si ves el estilo de todas las clases de columnas actuales de Bootstrap, notarás que todas contienen position:relative; min-height: 1px; padding-right: 15px; padding-left: 15px;. Básicamente, el código que publiqué solo se extiende sobre esto para que coincidan EXACTAMENTE con el estilo incorporado de Bootstrap. Luego aplico un ancho de 20%modo que 5 columnas iguales puedan caber en la página. Muy simple :)
Fizzix

1
¿qué tal nombrar para columna 2/5? O deberíamos usar: col-md-1ths para 1/5 y col-md-2ths para 2/5, col-md-5ths para 5/5 = ancho completo?
Alex

166

Para Bootstrap 3 , si quieres todo lo ancho y está utilizando LESS, SASSo algo similar, todo lo que tiene que hacer es hacer uso de las funciones de mixin 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 sólo se puede construir verdaderas clases de rutina de carga de columna de ancho completo utilizando estos mixins, pero también se puede construir todas las clases de ayuda relacionados 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 @gridColumnsque es perfectamente válida, pero que cambia el ancho de la columna central para todo el bootstrap. El uso de las funciones mixin anteriores agregará un diseño de 5 columnas en la parte superior de las columnas de rutina de arranque predeterminadas, por lo que no romperá ninguna herramienta de terceros o estilo existente.


55
La solución más limpia, como 2.4es un quinto de 12 ( 2.4*5=12), funciona para Bootstrap 3 en una cuadrícula de 12 columnas. También se aplica a make-xs, make-smpero no funcionará combinado con otras definiciones de
columnas

66
Estoy sorprendido por los relativamente pocos votos a favor de esta respuesta. Es, con mucho, el menos hacky, usando no solo la misma convención de nomenclatura que otras clases de columnas Bootstrap, sino también los mismos mixins que Bootstrap usa para crear sus propias columnas, por lo que probablemente sea a prueba de futuro hasta Bootstrap 4, como mínimo.
Chris Fritz

3
Se supone que esta es la mejor respuesta. He creado una biblioteca (para incluir offset, pully push) basado en esto para mi propio uso. Siéntase libre de echarle un vistazo
Kenny Ki

1
Como todos han dicho, sí, esta es ahora la respuesta correcta. @Sherbrow dijo que "no funcionarán combinados con otras definiciones de columnas estándar", pero esto no se debe a que esta solución sea incorrecta de alguna manera, es simplemente porque 12% 5! = 0.
Nick M

2
@ lightswitch05 Desafortunadamente, eso no era adecuado para mí ya que tenía una cantidad dinámica de columnas. Si solo tuviera una columna, todavía quisiera que fuera un quinto de la pantalla, pero usando la respuesta de Fizzix, una sola columna cubriría toda la pantalla. Logré resolverlo usando las nuevas funciones de combinación de Bootstrap 4. ¿Podría actualizar su respuesta para incluir esto si lo desea?
Plog

40

Actualización 2019

Bootstrap 4.1+

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://www.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 .rowutilizando un descanso como <div class="col-12"></div>o <div class="w-100"></div>cada 5 columnas.

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


2
No puedo esperar a que sea estable :)
nicolallias

2
Bueno, pero solo funciona con filas de 5 elementos. Si obtienes más, estás equivocado. Vea mi violín mejorado
djibe

Es por eso que le expliqué que debe usar el salto cada 5 columnas. Su solución funciona pero requiere CSS adicional.
Zim

También considere agregar flex-nowrapal .rowya que las columnas (automáticas) podrían exceder el ancho principal.
Luuk Skeur el

31

A continuación se muestra un combo de respuestas @machineaddict y @Mafnah, reescritas para Bootstrap 3 (hasta ahora me ha funcionado 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%;
    }
}

¿Dónde coloco esto y cómo lo uso?
sergserg

1
@Serg 1. Colóquelo debajo / después del archivo css Bootstrap 2. Agregue la clase .fivecolumns al .row, luego anide cinco columnas con la clase .col [, - sm, -lg] -2
plaidcorp

No va perfecto ancho completo en algunos casos.
Fizzix

¿Por qué no se agrega col-xs-2 a las declaraciones?
deslumbra el

@ganders solo un vistazo;
mira

27

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

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

<style type="text/css">
/* start of modification for 5 columns */
@media (min-width: 768px){
    .fivecolumns .span2 {
        width: 18.297872340425532%;
        *width: 18.2234042553191494%;
    }
}
@media (min-width: 1200px) {
    .fivecolumns .span2 {
        width: 17.9487179487179488%;
        *width: 17.87424986361156592%;
    }
}
@media (min-width: 768px) and (max-width: 979px) {
    .fivecolumns .span2 {
        width: 17.79005524861878448%;
        *width: 17.7155871635124022%;
    }
}
/* end of modification for 5 columns */
</style>

Y el html:

<div class="row-fluid fivecolumns">
    <div class="span2">
        <h2>Heading</h2>
        <p>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. </p>
        <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
    <div class="span2">
        <h2>Heading</h2>
        <p>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. </p>
        <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
    <div class="span2">
        <h2>Heading</h2>
        <p>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.</p>
        <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
    <div class="span2">
        <h2>Heading</h2>
        <p>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.</p>
        <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
    <div class="span2">
        <h2>Heading</h2>
        <p>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.</p>
        <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
</div>

Nota: Aunque span2 multiplicado por 5 no equivale a 12 columnas, se entiende la idea :)

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


10

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

<div class="container">
    <div class="row">
        <div class="col-xs-5">
            <div class="row">
                <div class="col-xs-6 column">Column 1</div>
                <div class="col-xs-6 column">Column 2</div>
            </div>
        </div>
        <div class="col-xs-7">
            <div class="row">
                <div class="col-xs-4 column">Column 3</div>
                <div class="col-xs-4 column">Column 4</div>
                <div class="col-xs-4 column">Column 5</div>
            </div>
        </div>
    </div>
</div>

jsfiddle

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

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

Tal pirateo da el resultado aceptable en muchos casos y no requiere ningún cambio de CSS (estamos usando solo las clases nativas de bootstrap).


9

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

Vaya a la página de personalización 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 compilación. Esta cuadrícula encajaría en contenedores predeterminados, preservando los anchos de canalización predeterminados (casi).

Nota: Si está utilizando MENOS, actualice en su variables.lesslugar.


7

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

.flexrow {
  display: flex;
  background: lightgray; /*for debug*/
}
.flexrow > * {
  flex: 1;
  margin: 1em;
  outline: auto green;
}
<div class="flexrow">
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div>...<br>..</div>
  <div>...</div>
</div>


flexbox es mejor que bootstrap si se adapta a tus necesidades.
ml242

6

He votado a favor de la respuesta de Mafnah, pero mirando esto de nuevo, sugeriría que lo siguiente es mejor si mantiene los márgenes predeterminados, etc.

<div class="equal row-fluid">
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
</div>

.equal .span2 {
    width: 17.9%;
}

1
El ancho real es 17.94872% y no responde, deberá establecer un nuevo margen para cada columna en todas las consultas @media.
machineaddict

5
<div class="equal row-fluid">
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
</div>

.equal .span2 {
    width: 20%;
}

1
eso debería ser .equal .span2 {ancho: 20%; }
Studio4

... y NO está funcionando. cada columna, excepto la primera, tiene margen restante.
machineaddict

5

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 así

<div class="col-sm-2 col-sm-offset-1"></div>
<div class="col-sm-2"></div>
<div class="col-sm-2"></div>
<div class="col-sm-2"></div>
<div class="col-sm-2"></div>

5

Bootstrap 4, número variable de columnas por fila

Si desea tener hasta cinco columnas por fila, de modo que un número menor de columnas solo ocupe solo 1/5 de la fila cada una, la solución es usar los mixins 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
}
.col-sm-2-4 {
    @include make-col-ready();
    @include media-breakpoint-up(sm) {
        @include make-col(2.4);
    }
}
.col-md-2-4 {
    @include make-col-ready();
    @include media-breakpoint-up(md) {
        @include make-col(2.4);
    }
}
.col-lg-2-4 {
    @include make-col-ready();
    @include media-breakpoint-up(lg) {
        @include make-col(2.4);
    }
}
.col-xl-2-4 {
    @include make-col-ready();
    @include media-breakpoint-up(xl) {
        @include make-col(2.4);
    }
}

HTML:

<div class="container">    
  <div class="row">
    <div class="col-12 col-sm-2-4">1 of 5</div>
    <div class="col-12 col-sm-2-4">2 of 5</div>
    <div class="col-12 col-sm-2-4">3 of 5</div>
    <div class="col-12 col-sm-2-4">4 of 5</div>
    <div class="col-12 col-sm-2-4">5 of 5</div>
  </div>
  <div class="row">
    <div class="col-12 col-sm-2-4">1 of 2</div> <!-- same width as column "1 of 5" above -->
    <div class="col-12 col-sm-2-4">2 of 2</div> <!-- same width as column "2 of 5" above -->
  </div>
</div>

4

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

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


3

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

<div class="col-sm-12">
<div class="row">
  <div class="col-sm-7 five-three">
    <div class="row">
      <div class="col-sm-4">
      Column 1
      </div>
      <div class="col-sm-4">
      Column 2
      </div>
      <div class="col-sm-4">
      Column 3
      </div><!-- end inner row -->
    </div>
  </div>
  <div class="col-sm-5 five-two">
    <div class="row">
      <div class="col-sm-6">
        Col 4
      </div>
      <div class="col-sm-6">
      Col 5
      </div>
    </div><!-- end inner row -->
  </div>
</div><!-- end outer row -->

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: ejemplo de 5 columnas iguales

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

Cinco columnas iguales en bootstrap 3


3

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

De esta forma, las columnas usan variables (@ grid-gutter-width, puntos de interrupción de medios) que el usuario puede haber anulado y el comportamiento de cinco columnas coincide con el comportamiento de la cuadrícula 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 */


3

De forma 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 de la misma manera 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 algo de código html

<div class="row">
    <div class="col-md-15 col-sm-3">
    ...
    </div>
</div>

3

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.

<div class="row">
<div class="col-md-1"></div>    
<div class="col-md-2">1</div>
<div class="col-md-2">2</div>
<div class="col-md-2">3</div>
<div class="col-md-2">4</div>
<div class="col-md-2">5</div>
<div class="col-md-1"></div>
</div>

3

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

3

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

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

HTML:

<div class="stretch">
  <div class="col-lg-2"></div>
  <div class="col-lg-2"></div>
  <div class="col-lg-2"></div>
  <div class="col-lg-2"></div>
  <div class="col-lg-2"></div>
</div>

CSS:

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

3

Simplemente cree una nueva clase y defina su comportamiento para 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;
  }
}

<div class="container-fluid">
  <div class="row">
    <div class="col-1-5">col 1</div>
    <div class="col-1-5">col 2</div>
    <div class="col-1-5">col 3</div>
    <div class="col-1-5">col 4</div>
    <div class="col-1-5">col 5</div>
  </div>
</div>

Aquí hay una demostración de trabajo https://codepen.io/giorgosk/pen/BRVorW


2

En Bootstrap 3, creo que podemos hacer algo así, para eliminar el margen izquierdo y derecho:

<div class="row this_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>

y CSS

.this_row {
    margin: 0 -5%;
}

2

Cómo puedes 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;} }
<div class="row">
  <div class="col-sm-1-5">
    <div class="item">Item 1</div>
  </div>
  <div class="col-sm-1-5">
    <div class="item">Item 2</div>
  </div>
  <div class="col-sm-1-5">
    <div class="item">Item 3</div>
  </div>
  <div class="col-sm-1-5">
    <div class="item">Item 4</div>
  </div>
  <div class="col-sm-1-5">
    <div class="item">Item 5</div>
  </div>
</div>


2

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

<div class="row">
  <div class="btn-group btn-group-justified">
    <div class="btn-group">
      <div class="col-sm-12">Column 1</div>
    </div>
    <div class="btn-group">
      <div class="col-sm-12">Column 2</div>
    </div>
    <div class="btn-group">
      <div class="col-sm-12">Column 3</div>
    </div>
    <div class="btn-group">
      <div class="col-sm-12">Column 4</div>
    </div>
    <div class="btn-group">
      <div class="col-sm-12">Column 5</div>
    </div>
  </div>
</div>

Y si necesita que se rompan más allá de cualquier punto de interrupción, simplemente haga un bloqueo de grupo btn. Espero que esto ayude a alguien.


2

Cinco columnas claramente no son parte de bootstrap por diseño.

Pero con Bootstrap v4 (alfa), hay 2 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 receptivas ( http://v4-alpha.getbootstrap.com/layout/responsive-utilities/ )

En términos simples, estoy usando

<style>
.flexc { display: flex; align-items: center; padding: 0; justify-content: center; }
.flexc a { display: block; flex: auto; text-align: center; flex-basis: 0; }
</style>
<div class="container flexc hidden-sm-down">
  <!-- content to show in MD and larger viewport -->
  <a href="#">Link/Col 1</a>
  <a href="#">Link/Col 2</a>
  <a href="#">Link/Col 3</a>
  <a href="#">Link/Col 4</a>
  <a href="#">Link/Col 5</a>
</div>
<div class="container hidden-md-up">
  <!-- content to show in SM and smaller viewport, I don't think 5 cols in smaller viewport are gonna be alright :) -->
</div>

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

El bonito tutorial de flexión está aquí " https://css-tricks.com/snippets/css/a-guide-to-flexbox/ "


2

He creado definiciones de mezcla de SASS basadas en definiciones de bootstrap para cualquier número 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 simplemente puede crear clases de la siguiente manera:

$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


2

Si alguien usa bootstrap-sass (v3), aquí hay un código simple para 5 columnas que usan mezclas de bootstrap:

  .col-xs-5ths {
     @include make-xs-column(2.4);
  }

  @media (min-width: $screen-sm-min) {
     .col-sm-5ths {
        @include make-sm-column(2.4);
     }
  }

  @media (min-width: $screen-md-min) {
     .col-md-5ths {
        @include make-md-column(2.4);
     }
  }

  @media (min-width: $screen-lg-min) {
     .col-lg-5ths {
        @include make-lg-column(2.4);
     }
  }

Asegúrate de haber incluido:

@import "bootstrap/variables";
@import "bootstrap/mixins";

1
gracias, esto era lo que estaba buscando, hice 1-5ths 2-5ths, etc. e incluso 3-10ths, etc. ahora también, para tener más flexibilidad, muy conveniente
morksinaanab

2

Para Bootstrap 4.4+

Usa las nuevas row-cols-nclases.

  1. Agrega row-cols-5clase a tu .rowdiv. No se necesita CSS personalizado.
  2. Consulte el documento 4.4 aquí para ver los valores de fila: https://getbootstrap.com/docs/4.4/layout/grid/#row-columns

Para Bootstrap 4 versiones anteriores a Bootstrap 4.4

  1. Copie CSS a continuación (impresionante CSS de autores de Bootstrap) y agréguelo a su proyecto

  2. Lea los documentos citados anteriormente para usarlo correctamente.

    .row-cols-1>*{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.row-cols-2>*{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.row-cols-3>*{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.row-cols-4>*{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.row-cols-5>*{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.row-cols-6>*{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}@media (min-width:576px){.row-cols-sm-1>*{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.row-cols-sm-2>*{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.row-cols-sm-3>*{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.row-cols-sm-4>*{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.row-cols-sm-5>*{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.row-cols-sm-6>*{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}}@media (min-width:768px){.row-cols-md-1>*{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.row-cols-md-2>*{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.row-cols-md-3>*{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.row-cols-md-4>*{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.row-cols-md-5>*{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.row-cols-md-6>*{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}}@media (min-width:992px){.row-cols-lg-1>*{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.row-cols-lg-2>*{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.row-cols-lg-3>*{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.row-cols-lg-4>*{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.row-cols-lg-5>*{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.row-cols-lg-6>*{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}}@media (min-width:1200px){.row-cols-xl-1>*{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.row-cols-xl-2>*{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.row-cols-xl-3>*{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.row-cols-xl-4>*{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.row-cols-xl-5>*{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.row-cols-xl-6>*{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}}


1

.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%;
  }
}

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.