Bootstrap,容器,容器-流体

Bootstrap, container, container-fluid

这是我试图使用 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>

背景是我想要的,但是 'left content' 和 'right content' 不会像网站的其他内容一样位于 'container' 内,如下所示:-

我怎样才能做到这一点?

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


试试这个

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

一种解决方案是扭曲容器并为其添加渐变背景。只有当两列彼此相邻时,该背景才应该可见。

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