将引导程序行扩展到容器外部

Question

我们在网站上使用的是Bootstrap 3，我对一个设计新颖的模板有一个要求，该模板的某些元素实际上并没有遵循bootstrap网格。我试图使其正常工作，但没有成功。

我试图在下图中解释问题。有人知道我该如何解决吗？

Answer 1

一种选择是使用CSS伪::before元素，该伪元素将与col-lg-6.. 一起调整高度。

#main {
    background: lightgreen;
    height: 100vh;
}

#main > .row {
    height: 100vh;
}

.left {
    background: red;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.left:before {
    left: -999em;
    background: red;
    content: '';
    display: block;
    position: absolute;
    width: 999em;
    top: 0;
    bottom: 0;
}
<div class="container" id="main">
    <div class="row">
        <div class="col-lg-6 left">
            ..
        </div>
    </div>
</div>

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

另一种选择是在充当“鬼影” .container-fluid的内容后面使用绝对位置（全角）.container...

.abs {
    position: absolute;
    right:0;
    top:0;
    bottom:0;
    z-index: 1;
}

<div class="container">
    <div class="row">
        <div class="col-sm-6">
            <h4>Content</h4>
        </div>
        <div class="col-sm-6">
            <!-- space over image -->
        </div>
    </div>
</div>
<div class="container-fluid abs">
    <div class="row h-100">
        <div class="col-sm-6 h-100">
            <!-- empty spacer -->
        </div>
        <div class="col-sm-6 right">
            <img src="//placehold.it/1000x400">
        </div>
    </div>
</div>

https://www.codeply.com/go/txUHH72f16（引导程序4）

类似的问题：
获取两列延伸到屏幕边缘不同的背景色
实施例与图像右
实施例与图像向左
延伸超出引导容器的元件