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>