在bootstrap中的同一行使用2个背景

Question

Bootstrap 3

我想用不同的背景颜色创建“正方形/矩形”。以下是我想要的示例：

黑色垂直线代表我使用的容器。当我将背景颜色应用于内部元素时，它不会“扩展”到容器外部。

以下是代码：

<!-- Header -->
<section class="purple-area">
<div class="container">
        <h1> PURPLE </h1>
    </div>
</section>

<!-- Main Content -->
<section class="space-top">
    <div class="container">
        <div class="row">
            <div class="col-md-6"> DARK GREY </div>
            <div class="col-md-6"> LIGHT GREY </div>
        </div>
    </div>
</section>

Answer 1

将容器延伸到最大宽度并使用内部div的填充。

您还可以通过在黑色容器外部定义div来“欺骗”，为其提供适当的背景。

Answer 2

这个简单的示例将解释如何在2 background jsfiddle中制作a single container。希望它有所帮助

- 编辑：updated fiddle

- 具有响应能力的fiddle