Question

我使用Bootstrap进行响应式设计，我的整个网站都包含在container内。问题是在某些页面上我需要在屏幕上有100％宽的<div>个元素。问题是他们的父母container当然不是100％宽，所以孩子也不可能。如果application.html.erb看起来像这样，我该怎么办：

<body>
  <div class="container">
    <%= yield %>
  </div>
</body>

因此，我生成的所有网站都在容器内。直到最近，这对我来说很棒。现在我遇到一个问题，生成的网站内的一些元素需要比容器更宽，我不知道如何实现。有任何想法吗？谢谢。

Answer 1

对需要它的页面使用不同的布局？

只需在layouts layouts文件夹中创建一个新文件即可。并在控制器中渲染时使用它。

渲染动作::页面，布局：＆＃39; new_layout＆＃39;

http://guides.rubyonrails.org/layouts_and_rendering.html

Answer 2

我将发布适用于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;
}

Answer 3

我经常使用的替代解决方案：

.element-we-want-to-jump-out {
    position:relative;
    width:110%;
    /* (width - 100)/2 */
    left:-5%;
}
.parent-of-container { 
    /* can be also a body element, only condition is that it should fill out full viewport width and you will not be able to scroll horizontally inside. */
    overflow-x:hidden;
}

请注意，Bootstrap容器使用绝对填充，而用于溢出的10％可能不足以用于非常低的视口宽度（<300px）。您仍然可以使用更多并调整“跳出元素”（例如，如果它是图像则更改背景大小，或者如果它是表格等则填充...）

当子元素需要比父元素宽时，覆盖Bootstrap容器宽度

3 个答案: