相对于包含div而不是window的bootstrap网格

Question

请参阅此笔以获取快速示例http://codepen.io/Irish1/pen/mymBje

HTML

<div class="container A">
  <div class="col-xs-12 col-md-4 border1 height"></div>
  <div class="col-xs-12 col-md-4 border2 height"></div>
  <div class="col-xs-12 col-md-4 border3 height"></div>
</div>
<div class="container B border1">
  <div class="col-xs-12 col-md-4 border1 height"></div>
  <div class="col-xs-12 col-md-4 border2 height"></div>
  <div class="col-xs-12 col-md-4 border3 height"></div>
</div>

CSS

.height {
  height: 20px;
}

.B {
  width: 325px;
  height: 100px;
}

.border1 {
  border: 1px black solid;
}
.border2 {
  border: 1px blue solid;
}
.border3 {
  border: 1px red solid;
}

容器A具有浏览器窗口的宽度,当窗口宽度低于768px时,包含3列,从33%宽度到100%宽度

容器B是相同的设置接受它的宽度只有350px.正如您在笔中看到的那样,3列的宽度为33%.

我确信这是按预期工作但是可以使网格相对于其包含div而不是浏览器窗口？因此,容器B中的div具有100%的宽度,因为B的宽度小于768px.

Answer 1

尝试使用这个CSS：

.abs {
  position: relative;
  display: inline-block;
}