twitter-bootstrap - equal - grid 5 columns bootstrap 4

Cinco columnas iguales en twitter bootstrap

Question

Quiero tener 5 columnas iguales en una página que estoy construyendo y parece que no entiendo 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 está demostrando la cuadrícula de cinco columnas sobre la parte del marco de arranque de Twitter?

Answer 1

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 aún ocupe hasta la quinta parte de la fila cada una, la solución es usar los mixins 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:

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

Answer 2

Crear 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 puntos y coma):

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

Descarga tu compilación. Esta cuadrícula encajaría en los contenedores predeterminados, conservando los anchos de canal predeterminado (casi).

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

Answer 3

Para Bootstrap 3 y superior

here 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, en combinación 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 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 otras 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 cómo las columnas responden.

OTRA DEMO - Incorporando las nuevas clases de col-*-5ths con otras como col-*-3 y col-*-2 . Cambie el tamaño del marco para ver que todos cambien a col-xs-6 en la vista de respuesta.

Para Bootstrap 4

Bootstrap 4 ahora usa flexbox de forma predeterminada, por lo que obtienes acceso a sus poderes mágicos directamente de la caja. Revise las columnas de diseño automático que ajustan dinámicamente el ancho según la cantidad de columnas que 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

Answer 4

Actualización 2018

Bootstrap 4.0

Aquí hay 5 columnas iguales, de ancho completo ( sin CSS o SASS adicionales ) usando 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 envuelvan dentro de la misma. .row utilizando un salto de corrección transparente como <div class="col-12"></div> o <div class="w-100"></div> cada 5 columnas

Ver también: Bootstrap - Diseño de 5 columnas.

Answer 5

A continuación se muestra un combo de respuestas de @machineaddict y @Mafnah, reescritas para Bootstrap 3 (funcionando bien para mí 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%;
    }
}

Answer 6

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>

Answer 7

Cómo puedes agregar la 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>

Answer 8

Cinco columnas claramente no son la 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 responsivas ( http://v4-alpha.getbootstrap.com/layout/responsive-utilities/ )

En termino simple, 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>

Sea 5,7,9,11,13 o algo probable, estará bien. Estoy seguro de que el estándar de 12 cuadrículas puede servir a más del 90% del estuche de uso, así que diseñemos de esa manera, ¡desarrolle más fácil también!

El tutorial de flex agradable está aquí " https://css-tricks.com/snippets/css/a-guide-to-flexbox/ "

Answer 9

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>

Answer 10

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 (estará sangrado un poco desde la derecha y la izquierda de la pantalla)

El código debe verse algo como esto

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

Answer 11

En bootstrap 3, creo que podemos hacer algo así, para eliminar los márgenes 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%;
}

Answer 12

En caso de que no necesite el mismo ancho exacto de columnas, puede intentar crear 5 columnas usando el 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%

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

Answer 13

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

De esta manera, las columnas utilizan las variables (@ grid-gutter-width, medios de interrupción de los medios) que el usuario puede haber anulado y el comportamiento de las 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 */

Answer 14

Esto es impresionante: http://www.ianmccullough.net/5-column-bootstrap-layout/

Solo haz:

<div class="col-xs-2 col-xs-15">

Y CSS:

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

Answer 15

He creado definiciones de mezcla 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 puedes 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

Answer 16

La solución más sencilla 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 el bloque btn-group. Espero que esto ayude a alguien.

Answer 17

Mantenga el bootstrap original con 12 columnas, no lo personalice. La única modificación que necesita hacer es css después de la versión original de bootstrap responsive css, como esta:

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 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/

Answer 18

Otra forma de habilitar 5 columnas en Bootstrap 3 es modificar el formato de 12 columnas usado por defecto 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 las variables @grid-columns de 12 a 20 . Entonces podrás crear 4 y 5 columnas.

Answer 19

Para Bootstrap 3 , si desea un ancho completo y está utilizando LESS , SASS o algo similar, todo lo que tiene que hacer es utilizar 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 puede crear verdaderas clases de columna de arranque de ancho completo utilizando estos mixins, sino que también puede crear todas las clases de ayuda 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 que cambia el ancho de la columna central para todos los bootstrap. El uso de las funciones de mezcla anteriores agregará el diseño de 5 columnas en la parte superior de las columnas de inicio predeterminadas, por lo que no romperá las herramientas de terceros o el estilo existente.

Answer 20

Para Twitter Bootstrap 3, esta es la forma más sencilla de lograr esto:

<section class="col col-sm-3" style="width: 20%;">
<section class="col col-sm-3" style="width: 20%;">
<section class="col col-sm-3" style="width: 20%;">
<section class="col col-sm-3" style="width: 20%;">
<section class="col col-sm-3" style="width: 20%;">

Answer 21

Por defecto, 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 manera 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 algo de código html

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

Answer 22

Se puede hacer anidando y usando un poco de anulación de css.

<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: 5 ejemplo de columna igual

Y aquí está mi escrito completo en Coderwall

Cinco columnas iguales en bootstrap 3

Answer 23

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

Answer 24

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

Answer 25

Una solución que no requiere una gran cantidad de 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*/
  }
}

Answer 26

Utilice cinco divs con una clase de span2 y asigne a la primera 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 como

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

Answer 27

Voté 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%;
}

Answer 28

Disposición de 5 columnas con el 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;
    }
}

Answer 29

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

Answer 30

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