在zurb中嵌套行基础网格
问题描述:
我是Zurb Foundation 5的新手。我试图用列和行构建一个复杂的标题栏。但是,我想在主行中使用嵌套行。在zurb中嵌套行基础网格
基金会网格系统有可能吗?我很困惑如何订购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>
答
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:检查代码段的全页面视图
谢谢!这工作完美。所以基本上,你首先定义了所有内容需要适应的主要行。然后,按列移动并在这些垂直部分中嵌套行。 – colleen 2014-10-18 15:00:41
这个答案是无关紧要的,或者它不再工作。与问题中的图像没有关系。 – atilkan 2015-10-10 20:38:59
@emrah它的工作原理..你可以在全屏看到小提琴,它看起来像上面的截图一样。 – Sudheer 2015-10-11 10:20:06