twitter-bootstrap-3 bootstrap样式查询 - Bootstrap 3.1如何使用mixin make-grid-columns()?





md (3)


根据文档 ,您可以使用.make-md-column(3); mixin,例如:

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

我以前使用Bootstrap 3.0,并从bootstrap编译我的CSS少文件+我自己的一些文件。

在这里我的一些类采用了一些这样的bootstrap样式:

.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中? : - /




这是用经典引导程序编写的网格:

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



因为我从来没有必要只将一个.col-放在.row ,所以我在目标列的包装行中设置了以下类。

.col-center > [class*="col-"] {
    float: none;
    margin-left: auto;
    margin-right: auto;
}

<div class="full-container">
    <div class="row col-center">
        <div class="col-xs-11">
            Foo
        </div>
        <div class="col-xs-11">
            Bar
        </div>
    </div>
</div>




grid twitter-bootstrap-3 less