鞋带、容器、容器-流体

Question

下面是我尝试使用Bootstrap实现的目标：-

​

​

红线显示容器div所在的位置。

我有问题的是背景颜色。例如，如果我做了如下事情：-

    <div class="container-fluid">

        <div style="background: #888;" class="col-md-8">
            left content
        </div>

        <div style="background: #999;" class="col-md-4">
            right content
        </div>

    </div>

背景是我希望它们是怎样的，但“左内容”和“右内容”将不像其他网站内容那样在“容器”内，如下所示：-

​

​

我怎样才能做到这一点？

如果这还不够清楚，我会进一步解释的，谢谢。

Answer 1

一种解决方案是扭曲容器并向其添加梯度背景。只有当两列相邻时，才能看到该背景。

CSS

@media (min-width: 992px ) {
  .wrap { background: linear-gradient(to right, #888 0%, #888 50%, #999 50%, #999 100%); }
}

<div class="wrap">
  <div class="container">
    <div class="row">
      <div class="col-md-8" style="background: #888;">
        Left content
      </div>
      <div class="col-md-4" style="background: #999;">
        Right content
      </div>
    </div>
  </div>
</div>

JSFiddle

Answer 2

尝尝这个

​

<div class="container-fluid">
<div class="row">
        <div style="background: #888;" class="col-md-8">
            left content
        </div>

        <div style="background: #999;" class="col-md-4">
            right content
        </div>
</div>
</div>

​