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>

奇怪的是面板标题没有展开以包含按钮。我有一种感觉，它适用于我应用的浮子。任何人都可以告诉我我哪里出错了，为什么会这样呢？

Answer 1

将.clearfix课程添加到.panel-heading

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

Answer 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/

Answer 3

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

工作样本：

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>

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

3 个答案: