我正在使用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;
}