Bootstrap - 具有两个柱的容器流体。右侧需要被限制

Question

我需要一个bootstrap中的一个部分，其中连续有两列（6和6）。

左侧6列div需要具有流体效果，其中包含拉伸到浏览器窗口的左边缘。

右6列div需要其内容匹配/保持在页面其他部分的右侧范围内，这些部分具有正常（非流体）容器类（宽度为1170px）。 / p>

我怎样才能最好地达到这个效果？

Answer 1

这适用于1170px宽的容器，您需要对其余大小的媒体查询。希望有所帮助。

CSS：

.stretch-left {
    margin-left: calc((100vw - 1170px) / -2);
}

HTML：

<div class="container">
    <div class="row">
        <div class="col-md-6 stretch-left">
            content
        </div>
        <div class="col-md-6">
            content
        </div>
    </div>
</div>