Question

我曾经使用过Bootstrap 3.0，并且从bootstrap编译我的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中？： - /

Answer 1

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

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

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

Bootstrap 3.1如何使用mixin make-grid-columns（）？

2 个答案: