擴展的引導容器背景的頁面

Question

我設計建立在引導3頁的邊緣，我想嘗試並重新創建以下設計：

我有段落我已將其放入container，以便在調整大小時保持頁面居中。但是，我希望某些行具有彩色背景，可以延伸到兩側，如圖所示。我不確定這是否可能？

我試過的一種方法是切換到container-fluid類的那些行，這些行到屏幕的邊緣。這類作品，但我不確定當頁面大小調整時，是否可以讓其中的文本與其他段落保持內聯？實際上，文本應該始終在所有文本塊的左側和右側具有一致的邊距。

我不認爲我需要在邊緣區域的內容，所以如果一個解決方案只涉及使用標準容器來保存內容，另一種方法可以將背景延伸到一邊，這可能會起作用。

Here is a JSFiddle to start off with，包括container-fluid中的一個橙色框，以演示該方法。

Answer 1

我不確定這是否是'最佳'解決方案，但它仍然是一個解決方案。

• 創建每個彩色框（:before）
• 絕對定位，一個僞元件（相對於彩色框 - 引導已經設置的位置是：上col-*-*相對）。
• 機頂盒和0底值，所以它總是正確的高度
• 設置背景顏色相匹配箱
• 給它一個寬幅，以確保它始終覆蓋槽（.container的側）上的寬屏
• 對於左側面的盒子，設置left: -[width of psuedo element]，右側盒設置right: -[width of pseudo element
• 最後，你需要一個頁面容器設置爲overflow: hidden。

HTML

<div id="page"> 
    <div class="container"> 
     ... 
    </div> 
</div> 

CSS

#page { 
    overflow: hidden; 
}  

.box-left:before, 
.box-right:before { 
    content: ''; 
    display: block; 
    position: absolute; 
    width: 999em; 
    top: 0; 
    bottom: 0; 
} 

.box-left:before { 
    left: -999em; 
    background: orange; 
} 

.box-right:before { 
    right: -999em; 
    background: lightblue; 
} 

DEMO