css - 调整窗口大小时，Twitter Bootstrap 面板高度会增加

Question

我遇到一个问题，当我减小窗口大小时，其中一个面板的高度会急剧增加。具体来说，我在一行中有两个面板 - 一个是 col-grid-5，另一个是 col-grid-4。 col-grid-4 header header 的高度(第二个低于 AKA Recent Active Projects)是一个比它应该增加的方式更多的高度。这是一个 plunkr:

http://plnkr.co/edit/NfI2xjth4ZU02duwLKDv

<div class="col-md-5">
        <div class="panel">
....
        </div>
</div>

<div class="col-md-4">
        <div class="panel">
....
        </div>
</div>

如果您调整 plunkr 的窗口大小，您会看到它发生在某个窗口宽度范围内。如果我重新排序表格(即将第二个放在第一位)，问题就会消失。但是，我不明白为什么会这样。

任何提示都会很棒!

Answer 1

这是 float 结算问题。您需要在嵌套的 .col-sm-6 周围包含另一个 .row 标记。简单的答案是，只要您在 bootstrap 中有一组列，就需要在它们周围划一行。

    <div class="col-md-5">
        <div class="panel">
            <div class="panel-heading no-border bg-primary">
                <span class="text-lt">Time Summary</span>
            </div>
            <div class="row">
              <div class="panel m-n col-sm-6 padder-v">
                Hours Today
                <i class="icon-arrow-right pull-right m-t-lg"></i>
                <div class="h2 b-b m-t-sm">2.50 </div>
              </div>
              ...
            </div>
        </div>
    </div>

更新的插件:http://plnkr.co/edit/rQqusAmUEWFrKMEqxRmz?p=preview