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

10-08 04:31