将背景颜色应用于 .row 类的嵌套元素的问题 - Zurb 基础 css 框架

Question

我正在使用基础框架来构建响应式网站。

我有以下 html

<div class="row">
    <div class="large-12 columns">
        <div class="wrapper">
            <div class="large-6 small-6 columns">
                <h1>site-title</h1>
            </div>
            <div class="large-6 small-6 columns">
                <p>descrption</p>
            </div>
        </div>
    </div>
</div>

css

.wrapper {
    color: red;
    background: green;
}
h1 {
    color: red;    
}

当我向 .wrapper 类添加背景颜色时，它不起作用。当将背景应用于行内的列的包装类并且一行具有总共 12 列的列时，总是会发生这种情况。

例如：

large-11 + large-11 , large-2+ large-10, large-6+large-6 等等。

我为此创建了jsfiddle

Answer 1

给你Fiddle

<div class="row">
    <div class="large-12 columns">
        <div class="wrapper">
            <div class="large-6 small-6 columns">
                <h1>site-title</h1>
            </div>
            <div class="large-6 small-6 columns">
                <p>descrption</p>
            </div>
            <div style="clear:both;"></div>
        </div>
    </div>
</div>