Twitter bootstrap 自举流体容器

Im在正确方向上的一个点之后，查询bootstrap框架的流体容器。我已经附上了我试图创造的视觉效果。我需要两行两列，但我需要的内容，以保持标准的容器规则。我想让它尽可能简单，没有复杂的css背景或渐变

我希望这是一个简单的问题。我以前从未遇到过使用bootstrap进行此操作的需要

---

这是不可能的，因为所有测量都是以百分比表示的，因此它们是相对于插入的父容器的

---

我的建议是将列放置在您真正想要停留的位置，然后使这个真实容器处于绝对位置，漂浮在另一个棕色和蓝色的容器上。

我将使用常用的引导容器和

col-*

，然后使用绝对位置伪元素作为色块背景

HTML

---

你可以通过在后面的内容上使用偏移来欺骗它，并用css的细微差异（边框等）来伪造前面的容器。这种解决方案的问题是，所定位的块不在屏幕上，因此它们会迫使页面在水平轴上滚动，因此尽管它呈现，它有一个不是理想的卷轴，你有一个有效的解决方案想和我分享吗？

<div class="container border">
    <div class="row">
        <div class="col-sm-12">

        </div>
    </div>
    <div class="row margin-0">
        <div class="col-md-6 a"></div>
        <div class="col-md-6 b"></div>
        <div class="col-md-6 c"></div>
        <div class="col-md-6 d"></div>
    </div>
</div>

.a:after {
  margin:0 15px 15px;
  position:absolute;
  content:"";
  display:block;
  background:#9999cc;
  top:0;
  right:0;
  bottom:0;
  z-index:-1;
  width:200%;
}
.b:after {
  margin:0 0 15px 0;
  position:absolute;
  content:"";
  display:block;
  background:#aa99cc;
  top:0;
  left:0;
  bottom:0;
  z-index:-1;
  width:200%;
}
.c:after {
  margin:0 15px 0;
  position:absolute;
  content:"";
  display:block;
  background:#cc2299;
  top:0;
  right:0;
  bottom:0;
  z-index:-1;
  width:200%;
}
.d:after {
  margin:0;    
  position:absolute;
  content:"";
  display:block;
  background:#aaeecc;
  top:0;
  left:0;
  bottom:0;
  z-index:-1;
  width:200%;
}