CSS/BOOTSTRAP : making element inside the gird (. 容器/.row) 全(屏幕)宽度

Question

所以我有一个站点结构...

body
---- main.container
--------- div.row
-------------- div.content

在内容元素中我注入(inject)了一些来自 CMS 的内容..

一切正常...但随后需要一个模块在内部充满(屏幕宽度)，所以在 .container 之外 - 一直到边缘

所以最后的内容是这样的:

body
---- main.container
--------- div.row
-------------- div.content
-------------------- div.col-xs-12.module1
-------------------- div.col-xs-12.module2
-------------------- div.full-width.module3
-------------------- div.col-xs-12.module4

现在，为了让 .full-width 类实现真正的全屏，我使用了 position: absolute，就像这样

.full-width{
    position: absolute;
    left: 0;
    width: 100%;
}

问题是，显然 position: absolute 从流中删除元素，然后 .module4 出现在 .module2 之后，.module3 出现在它上面。

现在，正确实现这一目标的最佳方法是什么？

需要考虑的事项:

• 全宽模块没有固定的高度，可以是任何高度，取决于里面的内容
• 我没有包装元素(内容/行)的确切边距/填充...因为它可以嵌套更多并且没有
  保证模块是 .row 的直接子项 ..... 所以负边距不起作用

有什么想法吗？

Answer 1

如果你想要一个全宽的行，你必须使用在 bootstrap documentation 中指定的 .container-fluid 类.

因此您的站点结构应如下所示:

body
---- main
--------- div.container
-------------- div.row
------------------- div.col-xs-12.module1
------------------- div.col-xs-12.module2
--------- div.container-fluid
-------------- div.row
------------------- div.full-width.module3
--------- div.container
-------------- div.row
------------------- div.col-xs-12.module4

编辑

如果您无法更改 HTML 结构 (IE11+):

.full-width {
    width: 100vw;
    margin-left: -50vw;
    left: 50%;
}

演示:http://www.bootply.com/tVkNyWJxA6