html – 启用bootstrap列背景以渗透到视口边缘

概述我正在尝试研究如何在Bootstrap 3中实现以下功能： >我有一个HTML页面,主要基于bootstrap的固定容器网格. >在页面的下半部分,我想要一排不同大小的列. >我希望这些列中的内容(文本/图像)与固定容器网格中列内的内容对齐. >我希望左右最远列的背景颜色直接渗到页面边缘. 如果我说明我想要实现的目标,它可能会有所帮助： 任何帮助将不胜感激！ 更新：根据要求,这里是我目前拥有的一些 我正在尝试研究如何在bootstrap 3中实现以下功能：

>我有一个HTML页面,主要基于bootstrap的固定容器网格.
>在页面的下半部分,我想要一排不同大小的列.
>我希望这些列中的内容(文本/图像)与固定容器网格中列内的内容对齐.
>我希望左右最远列的背景颜色直接渗到页面边缘.

如果我说明我想要实现的目标,它可能会有所帮助：

任何帮助将不胜感激！

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

解决方法 您可以使用：before元素和一些类

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

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

UPDATE

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

更新2

我添加了以下行来修复Chrome浏览器上的大水平滚动.

body,HTML {overflow-x: hIDden;margin: 0;padding: 0;}

总结

以上是内存溢出为你收集整理的html – 启用bootstrap列背景以渗透到视口边缘全部内容，希望文章能够帮你解决html – 启用bootstrap列背景以渗透到视口边缘所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。