展开父容器之外的子元素宽度

Question

我拥有带Bootstrap响应式设计的网页。我已经从左侧和右侧添加了填充以包装，因此在移动设备中，边缘之间会存在一些空白。但是我的扩展菜单有一些背景色，必须采用完整的浏览器宽度。我怎样才能做到这一点？我可以用负边距来制作，但不会扩大背景颜色。有没有办法做到这一点，而不改变布局？

#wrapper { 
 
    box-sizing: border-box; 
 
    /* responsive, so it's real 'width: 100%' */ 
 
    width: 150px; 
 
    height: 150px; 
 
    padding: 0 10px; 
 
    background-color: #ddd; 
 
    border: 1px solid green; 
 
} 
 
#wrapper .div { 
 
    background-color: #afa; 
 
    width: 100%; 
 
    height: 90px; 
 
    border: 1px solid red; 
 
    box-sizing: border-box; 
 
    margin-bottom: 10px; 
 
} 
 
#wrapper .div2 { 
 
    width: 100%; 
 
    height: 50px; 
 
    border: 1px solid red; 
 
    box-sizing: border-box; 
 
    background-color: #aaf; 
 
}

<div id="wrapper"> 
 
    <div class="div">Must expand till green borders</div> 
 
    <div class="div2">Must stay as is</div> 
 
</div>

Answer 1

可以使用负边距：http://jsfiddle.net/3f1t35xv/。

更改#wrapper .div以下几点：

#wrapper .div { 
    background-color: #afa; 
    /* width: 100%; */ 
    height: 90px; 
    border: 1px solid red; 
    box-sizing: border-box; 
    margin: 0 -10px 10px; 
} 

下面是另一个（少了很多优雅的）的方式来做到这一点：http://jsfiddle.net/au73dL07/。

#wrapper .div { 
    background-color: #afa; 
    height: 90px; 
    border: 1px solid red; 
    box-sizing: border-box; 
    position: relative; 
    left: -10px; 
    width: calc(100% + 2 * 10px); 
    margin-bottom: 10px; 
}