Question

我正在查看上一个问题here。

但无法弄清楚它是如何被使用的。我想复制Foundation网格，但是对于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

只需使用vanilla Bootstrap，我认为你需要做类似的事情：

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

你当然可以使用Sass / Less通过混叠来使其更清晰.my-grid-block至.col-sm-6.col-md-4.col-lg-3。

将Foundation的块网格转换为Bootstrap

1 个答案: