是否有推荐的方法在Bootstrap面板标题中有一个输入栏？

Question

我在我的面板标题中创建了一个搜索框，并且我已将它们两个浮动并清除以使它们都在同一条线上，如图所示： 它功能齐全，但并不好。这个标题让我感到恼火（如果你没有立刻注意到图像，那么垂直对齐真的很令人反感，并且在输入字段的底部或水平更适合）并且我没有＆＃ 39;由于我的网站使用了这些面板的 lot ，我想让它变大，我希望它看起来至少有点统一。

所以这让我认为肯定有人之前已经做过这样的事情，并且可能有一种内置于Bootstrap中的方法来处理这样的事情，或者如果不是，任何人都可以建议这种解决方案不会因为吨级或黑客垂直对齐而过于膨胀？

我已经删除了我的代码，但它具有相当可预测性和相当通用的Bootstrap用法。

编辑：我已经尝试过课程＆＃34;输入-sm＆＃34;，它有帮助，但仍然存在明显的对齐问题。

    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">A title</h3>
            <div class="input-group pull-right col-lg-6">
                <span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
                <input type="text" class="form-control" placeholder="Username">
            </div>
            <div style="clear: both"></div>
        </div>
    </div>  

Answer 1

只需在面板标题上调整行高：

.panel-title{
   float:left;
   line-height: 26pt;   
}
.panel-heading .input-group{
   padding-right: 0;    
}

http://bootsnipp.com/snippets/xvDB9