Bootstrap液容器

Question

我在正确方向上的一个点后，对引导框架的流体容器进行查询。我已经附上了我想要创造的东西的视觉效果。我需要两个流畅的2列，但我需要内容保持标准的容器规则。我希望尽可能简单地保持它没有复杂的CSS背景或渐变。

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

Answer 1

我会使用通常的Bootstrap容器和col-*，然后使用绝对位置伪元素作为颜色块背景。

HTML

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

CSS

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

http://www.codeply.com/go/OAdlxM3jKb

Answer 2

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

我的建议是将列放在你想要的地方，然后将这个真正的容器放在绝对位置，漂浮在另一个棕色和蓝色上。