引导按钮在面板标题内折叠答案

【问题标题】：Bootstrap buttons collapse inside the panel header引导按钮在面板标题内折叠
【发布时间】：2014-09-26 00:42:31
【问题描述】：

这里是一些示例代码：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>

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

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

首先，您的结构似乎不正确。您应该从一个按钮开始，然后使用该按钮的下拉方法打开您的列表。

一个工作样本：

enter link description here

还有“工作代码”：

    <div class="panel panel-default">
    <div class="panel-heading clearfix">
        <div class="btn-group pull-right">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action</button>

            <ul class="dropdown-menu">
                <li><a href="#">Action</a>
                </li>
                <li><a href="#">Another action</a>
                </li>
                <li><a href="#">Something else here</a>
                </li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a>
                </li>
            </ul>
        </div>
    </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>

【讨论】：

【解决方案2】：

如回答：Bootstrap 3 panel header with buttons wrong position

您应该应用“clearfix”来清除父元素。

这行得通：

    <div class="panel panel-default">
    <div class="panel-heading clearfix">
        <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>

示例代码如下：http://jsfiddle.net/52VtD/7248/

【讨论】：

【解决方案3】：

将.clearfix 类添加到.panel-heading

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

【讨论】：