html - 让图像显示在 Twitter Bootstrap 4 容器外，同时文本显示在容器内

Question

我的标题并不像我认为的那样具有描述性或准确性，因为此时我不确定如何更简洁地表达这个问题。我会预先为这个修改道歉。

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

我需要占据屏幕的其余部分(此文本的右侧)的是一个图像，它看起来会脱离 container 元素并利用视口(viewport)中的整个其余部分Bootstrap 行。

我不确定这是否是 Bootstrap 的 offset- 或 pull- 或 push- 类的工作。我似乎需要的是一个混合 container ，它将限制较大 (xl) 屏幕左侧前四列中的内容，然后允许其余八列中的内容爆发并表现得像container-fluid 元素中的内容。

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

https://jsfiddle.net/tcq0aj3r/

Answer 1

据我所知，实现它的最佳方法是使用伪类。它会随着容器和列进行调整，因此响应迅速。

演示: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