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

展开子元素宽度超出父容器

1 个答案: