基础框架嵌套列

Question

网格和基础的超级新手（我使用的是 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>

这行不通，但以下行。在我继续之前，我想检查一下这是否是我想做的事情的正确方法（所以 large-8 和 large-4 再次加起来等于 12，尽管嵌套在 large-8.

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

希望我解释正确。在此先感谢您的帮助！

Answer 1

第二个在大多数情况下都适用，但是 "Foundation" 执行您要求的方法（来自 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 只是结束一行而不必指定一个空列来填充 space，并且您需要第二个 .row（尽管没有它也能正常工作）因为你可能运行进一步陷入嵌套问题，否则。

基础框架嵌套列

Foundation framework nested columns

frameworks

zurb-foundation

two-columns