javascript - 如何使用 Zurb Foundation 4 填充网格行？

Question

我想实现以下布局，

Desktop:
[----A---][-B-]
[-C-][-D-][-E-]

Mobile:
[----- A -----]
[---B--][--C--]
[---D--][--E--]

我可以让“B”在移动版本中跳到新行并占用一半的空间，但我无法让它与“C”共享 - 这是发生的情况:

[----- A -----]
       [---B--]
[--C--][---D--]
       [---E--]

如何实现所需的布局？我正在使用 Zurb Foundation 4 框架。

标记如下

<div class="row">
  <div class="large-8 small-12 columns">
    A
  </div>
  <div class="large-4 small-6 columns">
    B
  </div>
</div>

<div class="row">
  <div class="large-4 small-6 columns">
    C
  </div>
  <div class="large-4 small-6 columns">
    D
  </div>
  <div class="large-4 small-6 columns">
    E
  </div>
</div>

Answer 1

据我所知，您可以根据自己的目的使用以下标记 ( fiddle ):

<div class="row">
  <div class="large-8 small-12 columns">
    A
  </div>
  <div class="large-4 small-6 columns">
    B
  </div>
  <div class="large-4 small-6 columns">
    C
  </div>
  <div class="large-4 small-6 columns">
    D
  </div>
  <div class="large-4 small-6 columns">
    E
  </div>
</div>