我正在使用Bootstrap进行响应式设计，我的整个网站都包裹在container中。问题是在某些页面上，我需要在屏幕上100％宽<div>元素。问题是他们的父母container当然不是100％宽，所以孩子也不能。如果application.html.erb看起来像这样，该怎么办：
<body>
<div class="container">
<%= yield %>
</div>
</body>
因此，我所有生成的网站都在容器内。直到最近，这对我来说还是很棒的。现在，我遇到一个问题，即生成的站点内的某些元素需要比容器宽，并且我不确定如何实现。有任何想法吗？谢谢。
最佳答案
我将发布一个适用于IE9 +的CSS解决方案，尽管我认为最好将.container-fluid类用于这种情况下使用不同的布局
.fullscreen-row{
width: 100vw;
position: relative;
left: calc(-50vw + 50%);
}
.fullscreen-row:before,
.fullscreen-row:after {
display: table;
content: " ";
}
.fullscreen-row:after {
clear: both;
}