grid - bootstrap - col md 12

Bootstrap 3.1 Cómo usar mixin make-grid-columns()?

Question

Solía ​​usar Bootstrap 3.0 y compilé mi CSS desde el archivo de arranque menos archivos + algunos de los míos menos.

En esto, algunas de mis clases adoptan algunos estilos de arranque como este:

.myClass{
.col-md-3;
border: 1px solid #000;
[etc, etc]
}

Funcionó muy bien en Bootstrap 3.0, ya que todas las clases col-md-X se definen como menos variables. Pero en Bootstrap 3.1 esto parece ser reemplazado de alguna manera con una función mixin llamada make-grid-columns ().

¿Alguien sabe cómo utilizar este mixin, y cómo portar la construcción anterior en Bootstrap 3.1? : - /

Answer 1

De acuerdo con la documentación , puede usar la .make-md-column(3); Mixin, por ejemplo:

.myClass{
.make-md-column(3); /* Replaces .col-md-3; */
border: 1px solid #000;
[etc, etc]
}

Answer 2

Esta es la cuadrícula escrita en el arranque clásico:

<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-2">Meow</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-2">Meow</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-2">Meow</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-2">Meow</div>
</div>

Y esto es auto compilado:

.productgrid {
.make-row();
.clearfix;
.product {
.make-xs-column(12);
.make-sm-column(6);
.make-md-column(4);
.make-lg-column(2);
}
}

El marcado de resultado se verá así:

<div class="productgrid">
<div class="product">Meow</div>
<div class="product">Meow</div>
<div class="product">Meow</div>
<div class="product">Meow</div>
</div>