Bootstrap，容器，容器 - 液体

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

<强> HTML

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