Question

我的头衔并不像我认为的那样具有描述性或准确性，因为我不确定如何在这一点上更简洁地说出这个问题。我会为这次破坏事先道歉。

我要做的是显示一些理想情况下受Bootstrap的container元素约束的文本。此文本将在标准Bootstrap container中左对齐运行。

我需要占用屏幕的其余部分（在本文右侧）是一个图像，它似乎会突破container元素并利用Bootstrap {{}中的整个视口的其余部分。 1}}。

我不确定这对于Bootstrap的row或offset-或pull-类是否可能是一项工作。我需要的是一个混合push-，它会限制较大（xl）屏幕左侧前四列中的内容，然后允许其余八列中的内容突破并表现为内容中的内容container元素。

我试图在这里简化一个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

获取图像以显示在Twitter Bootstrap 4容器之外，而文本显示在容器

1 个答案: