html - 我缺少哪些类(class) - Foundation 6？

Question

我正在学习 Foundation 6 框架，但一直无法获得预期的结果。

I want this three column grid approach up till mobile.

以下是我正在尝试但无法产生结果的内容。

.MyNewRow {
  background: red;
}

.MyNewRow .large-4 {
  background: yellow;
}

.MyNewRow .large-4+.large-4 {
  background: green;
}

.MyNewRow .large-4+.large-4+.large-4 {
  background: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/js/foundation.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.min.css" rel="stylesheet" />

<div class="row MyNewRow">
  <div class=" large-4 ">I am Row 1</div>
  <div class=" large-4 ">I am Row 2</div>
  <div class=" large-4 ">I am Row 3</div>
</div>

Answer 1

用户类 small-#对于手机:

.MyNewRow {
  background: red;
}

.MyNewRow .small-4 {
  background: yellow;
}

.MyNewRow .small-4+.small-4 {
  background: green;
}

.MyNewRow .small-4+.small-4+.small-4 {
  background: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/js/foundation.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.min.css" rel="stylesheet" />

<div class="row MyNewRow">
  <div class="small-4 columns">I am Row 1</div>
  <div class="small-4 columns">I am Row 2</div>
  <div class="small-4 columns">I am Row 3</div>
</div>

如果您希望在移动设备和桌面设备上使用相同的输出，则只使用 small-#类，无需添加另一个类，如 large-#或 medium-#

更多信息请查看:http://foundation.zurb.com/sites/docs/grid.html