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

Question

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

在第二行中，我将右 div 分成两行 "ON" 和 "OFF" div，但在左侧 "SETPOINT" 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 class 添加到 Bootstrap 行：

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

.row.equal{
  overflow: hidden; 
}

http://www.bootply.com/EfOgmUPSh1

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

How to make both div height same when combining rows in Bootstrap

twitter-bootstrap

twitter-bootstrap-3