zurb-foundation - 除非所有列都有内容，否则 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>s，<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>

但是，这不是处理需要居中的部分网格的最佳方法。Foundation 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 文本。

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