使用引导程序，添加位置绝对会更改元素的宽度

Question

我有一个不寻常的响应式布局，仅需要在CSS中做。除了平板电脑视图（768px-992px）框A（红色框）的宽度错误之外，我都能正常使用。当我应用绝对位置时会发生这种情况，我这样做是为了将其移出流程，并允许其余元素移动到位。

.red {
  height: 150px;
  background-color: red;
}
.green {
  height: 150px;
  background-color: green;
}
.blue {
  height: 150px;
  background-color: blue;
}
.yellow {
  height: 150px;
  background-color: yellow;
}
@media (min-width: 768px) and (max-width: 992px) {
  /* `.row` added for specificity's sake */
  .row .red {
    position: absolute;
    top: 150px;
    z-index: 1000;
  }
}
@media (min-width: 992px){
  .items {
    height: 50px;
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col-xs-3 col-sm-4 col-md-4 red">A</div>
    <div class="col-xs-3 col-sm-12 col-md-8 green items">B</div>
    <div class="col-xs-3 col-sm-4 col-sm-offset-4 col-md-offset-0 col-md-8 blue items">C</div>
    <div class="col-xs-3 col-sm-4 col-md-8 yellow items">D</div>
  </div>
</div>

如何调整此A尺寸，使框的大小C与D平板电脑视图相同？

（我愿意完全重新考虑布局的方式）

小提琴：http : //jsfiddle.net/billymoon/e64qLhp1/1/

Answer 1

可以通过添加position: relative该包装rowdiv来解决。