扩展的引导容器背景的页面

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