让图像显示在 Twitter Bootstrap 4 容器之外，而文本显示在容器内

Question

我的标题并不像我认为的那样具有描述性或准确性，因为我现在不确定如何更简洁地表达这个问题。我会为这次破坏提前道歉。

我想要做的是显示一些文本，这些文本最好受 Bootstrap 的 container 元素约束。此文本将在标准 Bootstrap container 中左对齐运行。

我需要占据屏幕其余部分（文本右侧）的是一个图像，该图像似乎突破了container 元素并利用了Bootstrap row 中的整个视口其余部分。

我不确定这是否适合 Bootstrap 的 offset- 或 pull- 或 push- 课程。我似乎需要的是一个混合container，它将限制更大（xl）屏幕左侧前四列中的内容，然后允许其余八列中的内容爆发并表现得像@987654330中的内容@ 元素。

我试图在这里简化一个 JsFiddle：

https://jsfiddle.net/tcq0aj3r/

Answer 1

AFAIK，最好的方法是使用伪类。它与容器和列一起调整，因此可以响应式地工作。

演示：http://www.codeply.com/go/XVVG24waWi

.right {
    z-index: 0;
    color: #fff;
}

.right:before {
    background-image:url("https://images.unsplash.com/photo-1480365150985-65998f933ef6?dpr=1&auto=compress,format&fit=crop&w=1199&h=899&q=80&cs=tinysrgb&crop=");
    background-repeat: no-repeat;
    content: '';
    display: block;
    position: absolute;
    z-index: -1;
    width: 999em;
    /* allow for bootstrap column padding */
    top: -15px;
    left: 0;
    bottom: -15px;
}

Demo

另见： Get Two Columns with different background colours that extend to screen edge