Bootstrap 3.1 如何使用 mixin make-grid-columns()？答案

【问题标题】：Bootstrap 3.1 How to use mixin make-grid-columns()?Bootstrap 3.1 如何使用 mixin make-grid-columns()？
【发布时间】：2014-02-25 10:12:04
【问题描述】：

我曾经使用 Bootstrap 3.0，并从 bootstrap less 文件 + 我自己的一些 less 文件中编译了我的 css。

在此我的一些课程采用了一些类似这样的引导样式：

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

在 Bootstrap 3.0 中效果很好，因为所有 col-md-X 类都被定义为更少的变量。但在 Bootstrap 3.1 中，这似乎被一个名为 make-grid-columns() 的 mixin 函数所取代。

有人知道如何使用这个 mixin，以及如何将上面的结构移植到 Bootstrap 3.1 中吗？ :-/

【问题讨论】：

标签： grid twitter-bootstrap-3 less

【解决方案1】：

根据the documentation，可以使用.make-md-column(3); mixin，例如：

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

【讨论】：

@mcolegro 它清除所有浮动。但也许你可以跳过这个，因为 make-row 已经这样做了