html - Bootstrap 按钮在面板标题内折叠

Question

这是一些示例代码:http://jsfiddle.net/52VtD/7243/

<div class="panel panel-default">
    <div class="panel-heading">
        <ul class="list-unstyled pull-right list-inline">
            <li>
                <button type="submit" class="btn btn-xs btn-default">Archive</button>
            </li>
        </ul>
    </div>
    <div class="panel-body">
        <img src="https://ssl.gstatic.com/accounts/ui/avatar_2x.png" alt="..." width="80px" height="80px" class="img-circle">

<h4>John Doe</h4>

    </div>
</div>

奇怪的是面板标题没有展开以包含按钮。我有一种感觉，这与我应用的 float 有关。谁能告诉我哪里出了问题以及为什么会这样？

Answer 1

将.clearfix类添加到.panel-heading

http://jsfiddle.net/52VtD/7245/