将图像显示在Twitter Bootstrap 4容器外部，同时文本显示在容器内部 [英] Getting an image to display outside of the Twitter Bootstrap 4 container whilst text displays inside the container

问题描述

我的标题并非如描述或准确，因为我相信这可能是因为我不确定如何在这一点上更简洁地解释问题。

我想要做的是显示一些文本，理想的情况是Bootstrap的容器元素。此文本将在标准Bootstrap 容器中左对齐。

我需要占用屏幕的其余部分（在本文的右边）是一个图像，它看起来会突破容器元素，并利用Bootstrap row 。

我不确定这是否会成为Bootstrap的偏移量的工作 - 或 pull - 或 push - 类。看起来我需要的是一个混合容器，它将限制较大（xl）屏幕左侧前四列中的内容，然后允许其余八列中的内容突破并像容器流体元素中的内容那样行为。

我试图简化这里的JsFiddle：

https://jsfiddle.net/tcq0aj3r/

解决方案

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

  .right { 
 z-index：0; 
颜色：#fff; 
} 
 
 .right：之前{
 background-image：url（https://images.unsplash.com/photo-1480365150985-65998f933ef6?dpr=1&auto =压缩，格式&安培;配合=作物&安培; W = 1199&安培; H = 899&安培; q = 80安培; CS = tinysrgb&安培;农作物=）; 
背景重复：不重复; 
内容：''; 
 display：block; 
位置：绝对; 
 z-index：-1; 
 width：999em; 
 / *允许引导列填充* / 
 top：-15px; 
剩下：0; 
底部：-15px; 
} 
  

Demo

另见：
获取两个不同背景颜色的列，可以扩展到屏幕边缘

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/

解决方案

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

这篇关于将图像显示在Twitter Bootstrap 4容器外部，同时文本显示在容器内部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！