获取图像以显示在Twitter Bootstrap 4容器外部，同时文本显示在容器内部

Question

我的标题不像描述或准确，因为我相信这可能是因为我不确定如何在此更简洁地解释问题点。我会为这个损坏道歉。

我想要做的是显示一些文本，理想情况下会受到Bootstrap的container元素的约束。该文本将在标准Bootstrap container内左对齐。

我需要占据屏幕的其余部分（在本文的右侧）是一个图像，它看起来会突破container元素，并在引导程序row内利用整个视口的其余部分。

我不确定这是否会成为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