css - 基础 block 网格间距不正确

Question

有人告诉我 block 状网格会在网格内均匀地放置元素。我是否需要在最后一个 li 元素中添加“.last”或其他内容以使其均匀间隔？因为这不是均匀分布的，http://i.imgur.com/QM0Gduz.png .您可以在下方看到哪个边框属于哪个元素。

这是正文部分中唯一的 HTML。使用最新版本。

<div class="row">
    <div class="large-12 column" style="border: 1px solid red;">
        <ul class="large-block-grid-4" style="border: 1px solid black;">
            <li><img src="http://placehold.it/150" /></li>
            <li><img src="http://placehold.it/150" /></li>
            <li><img src="http://placehold.it/150" /></li>
            <li style="border: 1px solid blue;"><img src="http://placehold.it/150" /></li>
        </ul>
    </div>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/foundation.min.js"></script>
<script>
    $(document).foundation();
</script>

Answer 1

只需将 text-align:center; 添加到您的主行，并确保您还通过包含中型/小型/超小型设备的网格尺寸来包括响应能力。 Zurb/Bootstrap 是为响应式设备构建的，这意味着创建响应式网站应该很容易。查看下面的 JSFiddle 以更好地了解我在说什么。

DEMO