启用引导列背景出血到视口边缘 [英] Enable bootstrap column backgrounds to bleed to edge of viewport

问题描述

我正在尝试找出如何在Bootstrap 3中实现以下目标:

I'm trying to work out how to achieve the following in Bootstrap 3:

1. 我有一个HTML页面，该页面主要基于bootstrap的固定容器网格.
2. 在页面的一半下，我希望一行包含不同大小的列.
3. 我希望这些列中的内容(文本/图像)与固定容器网格中列中的内容对齐.
4. 我希望最左边和最右边的列的背景颜色向右出血到页面边缘.

如果我说明自己要达到的目标，可能会有所帮助:

It may help if I illustrate what I'm trying to achieve:

任何帮助将不胜感激！

更新:根据要求，以下是我目前拥有的一些代码示例: http://www.bootply.com/ZzOefJGRRq 如您所见，流体容器中的文本和列未正确对齐.

Update: as requested here's some code examples of what I currently have: http://www.bootply.com/ZzOefJGRRq As you can see the text and columns in the fluid container are not lining up correctly.

推荐答案

您可以使用:before元素和某些类

You can use :before elements and some classes

https://jsfiddle.net/ex3ntia/wa8myL9v/2/

.bg:before {position:absolute;left:0em; content:'';height:100%;width:800em;z-index:-1}

更新

为小型设备添加了媒体查询 https://jsfiddle.net/ex3ntia/wa8myL9v/3/

added media query for small devices https://jsfiddle.net/ex3ntia/wa8myL9v/3/

更新2

我添加了以下行以修复chrome浏览器中的大水平滚动.

I have added the following line to fix the big horizontal scroll on chrome browsers.

body, html {overflow-x: hidden;margin: 0;padding: 0;}

这篇关于启用引导列背景出血到视口边缘的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！