css - 将 Foundation 的 block 网格转换为 Bootstrap

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。