html - 将 Bootstrap 行扩展到容器外

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://codeply.com/go/C80RYwhWrc

---

另一种选择是在内容 .container 后面使用绝对位置 .container-fluid(全 Angular )作为“幽灵”...

.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://codeply.com/go/txUHH72f16( Bootstrap 4)

---

类似问题:
Get Two Columns with different background colours that extend to screen edge
Example with image right
Example with image left
Extend an element beyond the bootstrap container