Bootstrap按钮组在面板的页脚中无法正确显示

Question

我正在使用Bootstrap,当插入面板页脚的右侧时,无法找到我的问题,其中按钮组未正确对齐.

我的代码ID:

<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;
}