我缺少什么课 - 基础6？

Question

我正在学习基础6框架，我无法获得理想的结果。

  

我希望这三列网格方法直到移动。

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

＆＃13;

＆＃13;

.MyNewRow {
  background: red;
}

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

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

移动用户类small-#：

＆＃13;

＆＃13;

.MyNewRow {
  background: red;
}

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

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13; 如果你想在移动设备上输出相同的输出桌面然后只使用small-#类，无需添加其他类，如large-#或medium-#

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

Answer 2

您需要在类

中添加columns属性

<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

  

我希望这三列网格方法直到移动。

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

  

我希望这三列网格方法直到桌面（大）。

始终遵循以下规则：首先是小型，然后是中型，然后是大型

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

如果你没有定义小班，那么假设它是小-12