html - Bootstrap设计容器-不同颜色的流体

Question

我想实现以下目标:

有一个流体容器，每一侧都有一种背景颜色 - 但分隔符应该是内部容器中的两个列。

我试着用这张图来描述它。这可能吗？

Answer 1

使用 css 位置和之后/之前参见下面的链接: Codepen

.container {
  background: #ddd;
  height: 250px;
}
.extra1 {
  height: 250px;
  background: #fff;
  position: relative;
  z-index: 999;
}
.extra2 {
  height: 250px;
  background: #000;
}
.extra1:before {
  content: '';
  background: yellow;
  position: absolute;
  width: 300%;
  top: 0px;
  height: 100%;
  left: -200%;
}
.extra2:before {
  content: '';
  background: green;
  position: absolute;
  width: 300%;
  top: 0px;
  height: 100%;
  right: -200%;
}
.your-things {
  position: absolute;
  left: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-md-4 extra1">
      <div class="your-things">
        <p>.col-md-4</p>
      </div>
    </div>
    <div class="col-md-8 extra2">
      <div class="your-things">
        <p>.col-md-8</p>
      </div>
    </div>
  </div>
</div>