我缺少什么类 - 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

手机用户classsmall-#：

.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-# class，无需添加另一个 class，例如 large-# 或 medium-#

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

Answer 2

您需要在 class

中添加列属性

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

Answer 3

I want this three column grid approach up till mobile.

基础框架是Mobile First你应该使用逻辑：

I want this three column grid approach up till desktop (large).

始终遵循这个规则：先小，然后中，然后大

<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>

如果您不定义小 class，则假定为小 12

我缺少什么类 - Foundation 6？

What classes i am missing- Foundation 6?

html

css

zurb-foundation

我缺少什么 类 - Foundation 6？

What classes i am missing- Foundation 6?

html

css

zurb-foundation

我缺少什么类 - Foundation 6？