CSS / BOOTSTRAP：使网格（.container / .row）内的元素完整（屏幕）宽度

Question

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

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

在内容元素中我注入了一些来自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类来实现全屏我去了位置：绝对，就像这样

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

问题是，显然位置：绝对从流中删除元素，然后.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