Foundation 网格系统中的标记：包装器放在哪里 div？

Question

我是 CSS-框架的新手。

通常我在正文中通过添加 div 和 class "wrap" 来开始我的标记。这样做的目的是让内容水平居中。并具有顶部、底部边距。

现在有了 Foundation，我想保持这种方法。但我不确定将 "wrap"-div 放在哪里。

这就是我目前得到的：

.wrap {
  margin: 10px auto;
}

<div class="wrap">
  <div class="row">
    <div class="small-12 columns">
      <div class="callout">
        <h1>Lorem Ipsum</h1>
      </div>
    </div>
  </div>
</div>

在 CodePen 上添加了 Foundation 的演示：http://codepen.io/mizech/pen/LWBOvQ

我的意思是：它有效，但我不确定我是否做对了。

我要保持原样吗？或者我应该把 "wrap"-div 放在别的地方吗？

我是否应该完全离开 "wrap"-div（使用 Foundation 时）并做其他事情？

Answer 1

您不需要包裹div。 Foundation 在 .row 上设置了最大宽度，因此其中的任何内容都将符合该网格。如果需要，您可以向该行添加带有垂直边距或填充的 class。如果您需要全宽行，只需添加 class .expanded 即可。

Foundation 网格系统中的标记：包装器放在哪里 div？

Markup within Foundation's grid system: Where to put a wrapper div?

html

css

responsive-design

zurb-foundation