将基金会的网格转换为引导程序

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。