启用引导列背景流到视口边缘 [英] 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 页面，它主要基于引导程序的固定容器网格.
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屋！