加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 资源网站 > 资源 > 正文

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

发布时间:2020-12-14 18:39:34 所属栏目:资源 来源:网络整理
导读:我正在尝试研究如何在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;}

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读