使用bootstrap，添加位置绝对更改元素的宽度

Question

我有一个不寻常的响应式布局，我只需要在CSS中做。除了平板电脑视图（768px - 992px）框A（红色的）宽度错误之外，我已经完成了所有工作。这种情况发生在我应用绝对位置时，我正在这样做以便将其从流中取出，并允许其余元素移动到位。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

如何调整此框，以便框A与平板电脑视图中的C和D大小相同？

（我完全可以重新思考布局的实现方式）

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

Answer 1

可以通过将position: relative添加到包装row div ..

来修复