当子元素需要比父元素宽时覆盖引导容器宽度

我正在使用Bootstrap进行响应式设计，并且我的整个站点都被包裹在container之内。问题是，在一些页面上，我需要在屏幕上有100％宽的元素。问题是他们的父母container当然不是100％宽，所以孩子也不能。我应该怎么做，如果application.html.erb看起来像这样：当子元素需要比父元素宽时覆盖引导容器宽度

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

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

来源

2014-10-20 user3339562

为什么子容器需要比它的父容器？您可能需要重新审视您的设计，具体取决于您要完成的任务以及确切的使用案例，因为您实质上要求的是如何用2升水填充1升的瓶子。 – 9ee1 2014-10-20 02:49:37

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

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

渲染动作：页面，布局：“new_layout”

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

来源

2014-10-20 07:12:23 Albin

我将发布一个CSS的解决方案那作品IE9 +，althought我相信它的更佳使用不同的布局与.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; 
}

来源

2014-10-20 07:22:41 tmg

替代的解决方案我使用相当频繁：

.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）。你仍然可以使用更多，并调整你的“跳出元素”（例如，如果它是一个图像更改背景大小，或者如果它是一张桌子等填充）...

来源

2016-06-03 10:15:26

当子元素需要比父元素宽时覆盖引导容器宽度

回答

相关问题