Question

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

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

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

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

由于

我的可怜尝试......

<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>

Answer 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%;
}

bootply：http://www.bootply.com/yDCLfN2DSb

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

1 个答案: