當子元素需要比父元素寬時覆蓋引導容器寬度

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

當子元素需要比父元素寬時覆蓋引導容器寬度

回答

相關問題