html - Bootstrap 等于 DIV 高度以防止重叠

Question

我正在使用 bootstrap 3。下面是我的布局。如何使 w 和 x 的底层相等，这样 y 就不会在 xs 中重叠？

  <div id="rx"> 
    <div class="row-fluid">
      <div class="span12"></div>
    </div>

    <div class="col-xs-8 col-sm-push-2 col-sm-7 col-md-push-4 col-md-5">
      <!--DIV W-->
    </div>

    <div class="col-xs-4 col-sm-push-2 col-sm-3 col-md-push-4 col-md-3"> 
      <!--DIV X-->
    </div>

    <div class="col-xs-12 col-sm-pull-10 col-sm-2 col-md-pull-8 col-md-4">
      <!--DIV Y-->
    </div>

    <div class="col-xs-12 col-sm-12 col-md-12" id="nk">
      <!--DIV Z-->
    </div>
  </div> 
</div> 

示例:在 xs DIV 中，y 从 x 的底层开始。因此 y 与 w

重叠

Answer 1

只需将 w 和 x 包在一行中，然后将 min-height 添加到 w 和 x 像这样:

.wbox {
    background-color: #333;
    min-height:100px;
}
.xbox{
    background-color: #FFF;
    min-height:100px;
}

这是一个 jsfiddle:https://jsfiddle.net/e0d8my79/28/

此外，除非您仍在使用 Bootstrap v2，否则 row-fluid 在 Bootstrap v3+ 中已弃用。只需在容器流体中保持正常行即可实现您想要的效果。