在zurb Foundation网格中嵌套行

Question

我是Zurb Foundation 5的新手。我正在尝试使用列和行构建复杂的标题栏。但是，我想在主行中使用嵌套行。

基础网格系统可以实现吗？我对如何订购div很困惑。

我链接到我尝试过的代码，但我无法正确嵌套第二行。

我想做什么：

http://jsfiddle.net/qv6z59w4/＆lt; ---我试图做的事情

<div class="row empty">
  <div class="a column small-12 large-3 center panel">A</div>
  <div class="">
    <div class="b column small-6 medium-3 large-2 panel">B
    </div>
    <div class="b column small-6 medium-3 large-2 panel">B
    </div>
    <div class="b column small-6 medium-3 large-2 panel">B
    </div>
    <div class="b column small-6 medium-3 large-2 panel">B
    </div>
    <div class="c column hide-for-medium-down large-1 panel">
      <ul>
        <li class="icon">C</li>
        <li class="icon">C</li>
        <li class="icon">C</li>
      </ul>
    </div>
    <div class="d column hide-for-small large-centered large-6 panel">D
    </div>
    <div class="e column small-12 large-2 panel">E
    </div>
  </div>
</div>

Answer 1

div { text-align: center; }

.a { background-color: red; }
.b { background-color: blue; }
.c { background-color: green; }
.n { background-color: yellow; }
.r { background-color: orange; }
.m { background-color: blue; }

<link href="http://cdn.jsdelivr.net/foundation/5.4.3/css/foundation.css" rel="stylesheet"/>
<div class="row">
  <div class="a large-3 small-12 columns">
    A
  </div>
  <div class="b large-8 small-12 columns">
    <div class="row">
            <div class="r large-3 columns">1
            </div>   
            <div class="r large-3 columns">2
            </div>   
            <div class="r large-3 columns">3
            </div>   
            <div class="r large-3 columns">4
            </div>
    </div>
    <div class="row">
            <div class="n large-8 columns">6
            </div>
            <div class="m large-4 columns">7
            </div>    
    </div>
  </div>
  <div class="c large-1 small-6 columns">
    C
  </div>
</div>

或者查看此fiddle

排成一行column-3，column-8跨越标题的中间部分和column-1，并将中间部分与适当的列嵌套。

P.S：检查代码段的整页视图