bootstrap clearfix使面板标题爆炸

Question

我有一个带有左右对齐元素的标准面板标题。

<div class="panel panel-default">


    <div class="panel-heading clearfix" >
        <h4 class="panel-title pull-left" style="padding-top: 7.5px;">{{ album.name }}<span class="badge">{{ album.image_count }}</span></h4>
        <div class="btn-group pull-right">
            <a class="btn btn-default btn-sm" data-target="#mymodal" type="button" data-toggle="modal">
                <i class="fa fa-pencil-square-o"></i>
            </a>
            <a href="">
                <span id="selected" style="display: none">here</span>
            </a>
        </div>
    </div>    
    <div class="panel-body">
        body content
    </div>
</div>

如果我将clearfix类应用于面板，面板标题的高度会爆炸到大约450像素。如果我离开clearfix，我会得到以下内容。 我尝试在bootply上使用相同的代码，但我没有看到问题。我一直在浏览chrome中的css，但找不到问题...

这是我添加到页面的CSS：

.col-lg-2 .col-md-3 .col-sm-4 .col-xs-6 {
    background-color: #840c15;
}

.thumbnail {
    margin-bottom: 0px;
    border: none;
}

.img-responsive {
    background-color: goldenrod;
}

.no-gutter [class*="-2"] {
    padding-left:0;
    padding-right:0;
}

.photo-group .photo-wrapper {
  position: relative;
}

.photo-group .photo-wrapper .photo {
    position: relative;
    margin: 0 auto;
    display: table;
}

.photo-group .photo-wrapper .photo-label {
    position: absolute;
    bottom: 5px;
    right: 5px;
    float: right;
    color: #ebab11;
}

.photo-tick {
    position: absolute;
    top: 5px;
    right: 5px;
    float: right;
}

.unticked {
    color: #6b606c;
}

.ticked {
    color: #55eb2d;
}


#side-panel {
    float: left;
    width: 240px;
    padding: 10px 20px 10px 20px;
    height: 100%;


    text-align: center;
}

#center-panel {
    margin-left: 280px;

    text-align: center;
}
#center-panel .row-fluid {
    overflow: auto;
}