html - Bootstrap 按钮组未在面板的页脚中正确显示

Question

我正在使用 Bootstrap，但我找不到我的问题，即当插入面板页脚的右侧时按钮组未正确对齐。

我的代码编号:

<div class="container">

        <div class="col-md-6">
            <div class="panel panel-primary">
                <div class="panel-heading"><b>My Title</b><span class="pull-right">123</span></div>
                <div class="panel-body">
                    Just a test text<br>
                </div>
                <div class="panel-footer">
                    Some information herre

                    <div class="btn-group pull-right">
                      <button type="button" class="btn btn-primary dropdown-toggle " data-toggle="dropdown">
                        Group of buttons <span class="caret"></span>
                      </button>
                      <ul class="dropdown-menu" role="menu">
                        <li><a href="#"><span class="glyphicon glyphicon-edit"></span> Edit</a> </li>
                        <li><a href="#"><span class="glyphicon glyphicon-trash"></span> Delete</a></li>
                        <li class="divider"></li>
                        <li><a href="#"><span class="glyphicon glyphicon-list-alt"></span> PDF</a></li>
                      </ul>
                </div>
            </div>
            </div>
        </div>

    </div><!-- /.container -->

为了演示问题，请查看工作代码:

http://jsfiddle.net/69r7s63w/

Answer 1

实际上，最简单和最干净的方法是在页脚中添加一个 clearfix 类:

<div class="panel-footer clearfix">

演示:http://jsfiddle.net/r819f85u/

您不需要添加任何额外的标记来存档它。如果你有多个这样的实例，你甚至可以覆盖 panel-footer 让自动生效，但你最好使用 Less/Sass/... 版本，否则添加一个很复杂clearfix 效果。

下面是一个使用 Sass 的例子:

// Overriding must be written or imported after Bootstrap
.panel-footer {
  @include clearfix;
}