将子元素宽度扩展到父容器之外

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;
}