基础框架嵌套列答案

【问题标题】：Foundation framework nested columns基础框架嵌套列
【发布时间】：2017-01-12 07:04:44
【问题描述】：

网格和 Foundation 的超级新手（我使用的是 6.3）。我只是想检查一下我是否正确，因为我发现很难对照官方文档进行检查。

基本上我试图将 8 列连续居中。然后我想要其中的两列，一列用于内容，另一列用于侧边栏。

最初我创建了以下内容，因为对我来说，一个 large-8 列将在其中包含一个 large-6 和 large-2，加起来是容器的 8 个。

<div class="row">
  <div class="large-8 columns large-centered">
      <div class="large-6 columns" style="background-color: red;">1</div>
      <div class="large-2 columns" style="background-color: green;">2</div>
  </div>
</div>

这不起作用，但以下是有效的。在我继续之前，我想检查这是否是做我想做的事情的正确方法（因此尽管大 8 和大 4 嵌套在大 8 中，但实际上大 8 和大 4 再次加起来为 12。

<div class="row">
  <div class="large-8 columns large-centered">
      <div class="large-8 columns" style="background-color: red;">1</div>
      <div class="large-4 columns" style="background-color: green;">2</div>
  </div>
</div>

我希望我解释正确。提前感谢您对此提供的帮助！

【问题讨论】：

第二个是正确的。默认情况下，一行有 12 列。

标签： frameworks zurb-foundation two-columns

【解决方案1】：

第二种方法在大多数情况下都可以使用，但是按照您的要求（来自http://foundation.zurb.com/sites/docs/grid.html）的“基础”方式是：

<div class="row">
  <div class="large-8 large-offset-2 end columns">
      <div class="row">
          <div class="large-8 columns" style="background-color: red;">1</div>
          <div class="large-4 columns" style="background-color: green;">2</div>
      </div>
  </div>
</div>

所以你有：

2 col |         8 col          | 2 col
--------------------------------------
      |     8 col     | 4 col  |

.end 只是简单地结束一行，而不必指定一个空列来填充空间，并且您需要第二个 .row（尽管没有它也可以工作），因为您可能会遇到嵌套问题否则换行。

【讨论】：