Getting an image to display outside of the Twitter Bootstrap 4 container whilst text displays inside the container

问题

My title is not as descriptive or accurate as I believe it could be because I am not certain of how to phrase the issue more succinctly at this point. I will apologise up front for this mangling.

What i'm trying to do is show some text which would ideally be constrained by Bootstrap's container element. This text would run left-aligned within the standard Bootstrap container.

What i need occupying the remainder of the screen (to the right of this text) is an image which would appear to break out of the container element and utilise the entire rest of the viewport within the Bootstrap row.

I'm not sure if this might somehow be a job for Bootstrap's offset- or pull- or push- classes. What it seems i need is a hybrid container that would constrain content in the first four columns on the left of a larger (xl) screen and then allow content in the remaining eight columns to break out and behave like content within a container-fluid element.

I've attempted to streamline a JsFiddle of this here:

https://jsfiddle.net/tcq0aj3r/

回答1:

AFAIK, the best way to approach it is using a pseudo class. It adjusts along with the container and columns and therefore works responsively.

Demo: 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

Also see: Get Two Columns with different background colours that extend to screen edge

来源：https://stackoverflow.com/questions/43436830/getting-an-image-to-display-outside-of-the-twitter-bootstrap-4-container-whilst