將基金會的網格轉換爲引導程序

Question

我在看前一個問題here。

但無法弄清楚它是如何被使用的。我想複製基礎網格，但對Bootstrap複雜並且難以無縫地進行。

這裏是我試圖：

<div class="row"> 
    <div class="col-lg-12"> 
     <ul class="block-grid-3"> 
      <li class="block-grid-3"><span>Testing one two three</span> 
      </li> 
      <li class="small-block-grid-3"><span>Testing one two three</span> 
      </li> 
      <li class="small-block-grid-3"><span>Testing one two three</span> 
      </li> 
      <li class="small-block-grid-3"><span>Testing one two three</span> 
      </li> 
      <li class="small-block-grid-3"><span>Testing one two three</span> 
      </li> 
      <li class="small-block-grid-3"><span>Testing one two three</span> 
      </li> 
      <li class="small-block-grid-3"><span>Testing one two three</span> 
      </li> 
     </ul> 
    </div> 
</div> 

http://jsfiddle.net/70h9vf5c/

理想我想能夠添加：small-block-grid-2 medium-block-grid-3 large-block-grid-4到ul並讓它每個屏幕尺寸的工作。

Answer 1

只需香草引導，我想你需要做的是這樣的：

<div class="row"> 
    <div class="col-sm-6 col-md-4 col-lg-3">Testing one two three</div> 
    <div class="col-sm-6 col-md-4 col-lg-3">Testing one two three</div> 
    ... 
</div> 

你當然可以使用薩斯/減，使其更清潔通過例如走樣.my-grid-block至.col-sm-6.col-md-4.col-lg-3。