Question

我遇到一个问题，当我减小窗口大小时，我的一个面板的高度会急剧增加。具体来说，我在一行中有两个面板 - 一个是col-grid-5，另一个是col-grid-4。 col-grid-4标题高度（AKA Recent Active Projects下面的第2个标题）是增加的方式。这是一个傻瓜：

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

这是一个浮动清算问题。您需要在嵌套的.row周围添加另一个.col-sm-6标记。简单的回答是，只要你在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>

更新了plunker：http://plnkr.co/edit/rQqusAmUEWFrKMEqxRmz?p=preview

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

1 个答案: