Zurb foundation 如何在地基上架桥

这个问题类似于一个问题，但这次我尝试使用不同的方法实现布局：网格，而不是块网格

我读了ZURB关于的文章，但最终结果与我的预期不符。第一行和第二行之间没有空白。那么我怎样才能让你在文章中看到的利润发挥作用呢

到目前为止，我得到的是：

第一种方法

<div class="row">
    <div class="small-9 small-centered column">
        <div class="row">
            <div class="small-4 column">
                <img src="http://placehold.it/256x512&text=PANEL"/>
            </div>
            <div class="small-8 column">
                <div class="row">
                    <div class="small-6 column">
                        <img src="http://placehold.it/256&text=ROW-1"/>
                    </div>
                    <div class="small-6 column">
                        <img src="http://placehold.it/256&text=ROW-1"/>
                    </div>
                </div>
                <div class="row">
                    <div class="small-6 column">
                        <img src="http://placehold.it/256&text=ROW-2"/>
                    </div>
                    <div class="small-6 column">
                        <img src="http://placehold.it/256&text=ROW-2"/>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="small-9 small-centered column">
        <div class="row">
            <div class="small-4 columns">
                <img src="http://placehold.it/256x512&text=PANEL"/>
            </div>
            <div class="small-4 columns">
                <div class="row">
                    <div class="small-12 columns">
                        <img src="http://placehold.it/256&text=ROW-2"/>
                    </div>
                </div>
                <div class="row">
                    <div class="small-12 columns">
                        <img src="http://placehold.it/256&text=ROW-2"/>
                    </div>
                </div>
            </div>
            <div class="small-4 columns">
                <div class="row">
                    <div class="small-12 columns">
                        <img src="http://placehold.it/256&text=ROW-2"/>
                    </div>
                </div>
                <div class="row">
                    <div class="small-12 columns">
                        <img src="http://placehold.it/256&text=ROW-2"/>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

第二种方法

<div class="row">
    <div class="small-9 small-centered column">
        <div class="row">
            <div class="small-4 column">
                <img src="http://placehold.it/256x512&text=PANEL"/>
            </div>
            <div class="small-8 column">
                <div class="row">
                    <div class="small-6 column">
                        <img src="http://placehold.it/256&text=ROW-1"/>
                    </div>
                    <div class="small-6 column">
                        <img src="http://placehold.it/256&text=ROW-1"/>
                    </div>
                </div>
                <div class="row">
                    <div class="small-6 column">
                        <img src="http://placehold.it/256&text=ROW-2"/>
                    </div>
                    <div class="small-6 column">
                        <img src="http://placehold.it/256&text=ROW-2"/>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="small-9 small-centered column">
        <div class="row">
            <div class="small-4 columns">
                <img src="http://placehold.it/256x512&text=PANEL"/>
            </div>
            <div class="small-4 columns">
                <div class="row">
                    <div class="small-12 columns">
                        <img src="http://placehold.it/256&text=ROW-2"/>
                    </div>
                </div>
                <div class="row">
                    <div class="small-12 columns">
                        <img src="http://placehold.it/256&text=ROW-2"/>
                    </div>
                </div>
            </div>
            <div class="small-4 columns">
                <div class="row">
                    <div class="small-12 columns">
                        <img src="http://placehold.it/256&text=ROW-2"/>
                    </div>
                </div>
                <div class="row">
                    <div class="small-12 columns">
                        <img src="http://placehold.it/256&text=ROW-2"/>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

---

向行div添加一个类

，然后向该类添加填充

.row .custom {
padding-bottom: 10px;
}

---

更新的小提琴

问题是什么？你想干什么对不起，我想这很清楚。“第一行和第二行之间没有填充物。”我需要填充物。我会重写这篇文章。你确定这是正确的答案吗？我的印象是默认情况下应该有空白/空白？我真的需要添加这个吗？基础中的行之间没有空格。没有空白或空白。如果您需要空间，您必须编写一个自定义类！哦，我真的不知道。很高兴知道，谢谢你的帮助。