在zurb中嵌套行基础网格

Question

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

基金会网格系统有可能吗？我很困惑如何订购div。

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

我想做的事：

http://jsfiddle.net/qv6z59w4/ < ---我试图做

<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：检查代码段的全页面视图