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

Question

我曾經使用Bootstrap 3.0，並從bootstrap編譯我的css文件少一些我自己少。

在這一些我的課的採用一些引導的風格是這樣的：

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

它的工作大有引導3.0，因爲所有COL-MD-X類被定義爲更少的變量。但在Bootstrap 3.1中，這似乎被某種稱爲make-grid-columns（）的mixin函數取代。

有誰知道如何利用這個mixin，以及如何將上面的構造移植到Bootstrap 3.1中？ ： -/

Answer 1

據the documentation，您可以使用.make-md-column(3);混入，例如：

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