Bootstrap 3.1 Как использовать mixin make-grid-columns()?

Я использовал Bootstrap 3.0 и скомпилировал мой css из загрузочного файла меньше файлов, а некоторые из моих меньших.

В этом некоторые из моих классов применяют такие стили бутстрапа, как это:

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

В Bootstrap 3.0 он отлично справился, поскольку все классы col-md-X определены как меньшие переменные. Но в Bootstrap 3.1 это как-то заменено на функцию mixin, называемую make-grid-columns().

Кто-нибудь знает, как использовать этот mixin, и как перенести конструкцию выше в Bootstrap 3.1?: -/

Ответ 1

Согласно документации, вы можете использовать mixin .make-md-column(3);, например:

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

Ответ 2

Это сетка, написанная в классическом бутстрапе:

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

И это само скомпилировано:

.productgrid {

  .make-row();
  .clearfix;

  .product {

    .make-xs-column(12);
    .make-sm-column(6);
    .make-md-column(4);
    .make-lg-column(2);
  }
}

Разметка результата будет выглядеть так:

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