Bootstrap 3 - 2 列，全宽背景，标准容器内的内容答案

【问题标题】：Bootstrap 3 - 2 columns, full width backgrounds, content within standard containerBootstrap 3 - 2 列，全宽背景，标准容器内的内容
【发布时间】：2016-03-15 03:24:13
【问题描述】：

我目前正在学习 Bootstrap，但遇到了一个我无法理解的问题。

我有两列，其中我需要不同颜色和全宽的背景。但是，根据我的其余布局，我需要将我的内容保留在普通容器中。

当我使用“container-fluid”时，我的内容以及背景颜色都是全宽的——这是我不想要的。如果我在 'container-fluid' 和 'row' 中嵌套了一个 'container'，那么所有东西都被包含在标准容器中（背景和所有）——这也是我不想要的。

所以我的问题是，如何使用全宽背景颜色和引导程序 3 中普通容器内的内容来编写此网格布局？

谢谢

The design layout for Mark Up

我可怜的尝试...

<div class="container-fluid">
  <div class="row">
    <div class="col-md-7 col-md-push-5 bg-danger">ICON</div>
    <div class="col-md-5  col-md-pull-7 bg-success">WEB DEVELOPMENT</div>
  </div>
</div>

<div class="container-fluid">
  <div class="row">
    <div class="col-md-7 bg-danger">ICON</div>
    <div class="col-md-5 bg-success">WEB DESIGN</div>
  </div>
</div>

【问题讨论】：

欢迎来到 StackOverflow！你可以把你的row div 和它们的内容放在一个宽度和高度为 100% 的 div 中？
您好，谢谢。我已经从 StackOverflow 学到了很多东西。对不起，我不明白你的意思？将宽度和高度设为 100% 会做什么？
对不起，高度部分不是必需的，但是将总体容器设置为 100% 宽度会使其占据窗口的整个宽度，这就是我假设你说你想要的意思“全角”。

标签： twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

我这样做：

<div class="row">
<div class="container">
    <div class="col-xs-6">
        <h1>left</h1>
    </div>

    <div class="col-xs-6">
        <h1>right</h1>
    </div>
</div>
</div>

CSS：

.row {
background-color: #e1e2e4;
background-image: url('image.jpg');
background-repeat: no-repeat;
background-size: 50% 100%;
}

引导层：http://www.bootply.com/yDCLfN2DSb

【讨论】：