启用引导程序列背景以渗透到视口的边缘

Question

我正在尝试研究如何在Bootstrap 3中实现以下功能:

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

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

任何帮助将不胜感激!

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

Answer 1

引导程序 4

在宽度为 50vw 的元素之前或之后使用绝对位置

代码笔

HTML

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-12">
      ...
    </div>
  </div>  
  <div class="row">
    <div class="col-lg-6 c-col-bg--red">
      ...
    </div>
    <div class="col-lg-6 c-col-bg--blue">
      ...
    </div>
  </div>
</div>

CSS

.container-fluid {
    max-width: 1000px;
}

@media (min-width: 992px) {
    div[class*="c-col-bg"] {
        position: relative;
    }

    div[class*="c-col-bg"]:after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        z-index: -1;
        width: 50vw;
    }

    .c-col-bg--red:after {
        right: 0;
        background: red;
    }

    .c-col-bg--blue:after {
        left: 0;
        background: blue;
    }
}

Answer 2

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

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/

更新2

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

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