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{ 
    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