除非所有列都有内容，否则Zurb Foundation Grid无法正常工作

Question

这是我的简单代码：

<div class="row">
  <div class="large-3 columns">
     <br>
  </div>
  <div class="large-6 columns">
    <h1>Welcome</h1>
  </div>
  <div class="large-3 columns">
    <br>
  </div>
</div>

如果我取出<br>，<h1>内容将显示在左侧，就好像large-3 columns从未存在过一样。

这有什么理由吗？除了添加虚拟内容之外，还有更好的方法来修复它吗？

Answer 1

在Foundation 4中，有一种称为网格偏移的东西。

<!-- more of what you're looking for -->
<div class="row">
    <div class="large-offset-3 large-6 columns">
        <h1>Welcome</h1>
    </div>
</div>

但是，这不是处理需要居中的网格部分的最佳方法。基础4也有一个居中的网格，所以最正确的代码是：

<!-- centered column -->
<div class="row">
    <div class="large-6 large-centered columns">
        <h1>Welcome</h1>
    </div>
</div>

所有这些的文档可在此处找到：http://foundation.zurb.com/docs/components/grid.html

Answer 2

我不知道有更好的方法来解决它。我总是只放一个 或一些lorem文本。

在填写内容时，您还可以使用推/拉类来获得正确的定位。