如何在Bootstrap中组合行时使div高度相同

Question

我正在学习Twiiter Bootstrap 3.0。我已经彻底完成了网格系统。基本上我想实现如下结构：

在第二行中，我将右边的div分成两行作为＆＃34; ON＆＃34; ＆安培; ＆＃34; OFF＆＃34; div，但在左侧＆＃34; SETPOINT＆＃34; div高度不一样。我想让div高度相同。请点亮我的道路。我可以使用JQuery (See Demo Here)执行此操作，但我想以BOOTSTRAP 3.0的方式使用它。我的代码是这样的：

<div class="container">
<header class="row top-buffer divHeader">
<div class="col-xs-8 myBorder">
    <h1>Logo</h1>
</div>
<div class="col-xs-4 myBorder">
    <div class="col-xs-offset-1 col-xs-10 col-xs-offset-1 myBorder">
        <h1>Setting</h1>
    </div>
</div>

<div class="container">
<div class="row top-buffer divBG">
    <div class="col-xs-8">
        <h1>Setpoint</h1>
    </div>
    <div class="col-xs-4">
        <div class="col-xs-offset-1 col-xs-10 col-xs-offset-1">
            <h1>On</h1>
        </div>
        <div class="col-xs-offset-1 col-xs-10 col-xs-offset-1">
            <h1>Off</h1>
        </div>
    </div>
</div>

Answer 1

这是使用CSS负边距的另一种方法。只需将equal类添加到Bootstrap行：

.row.equal [class*="col-"]{
  margin-bottom: -99999px;
  padding-bottom: 99999px;
}

.row.equal{
  overflow: hidden; 
}

http://www.bootply.com/EfOgmUPSh1