html - 在 Bootstrap 面板标题中有一个输入栏的推荐方法吗？

Question

我在我的面板标题中制作了一个搜索框，我将它们都 float 并固定到同一行上，如图所示: 它的功能，但它不是很好。这个标题让我很恼火(如果你没有立即注意到图像，垂直对齐真的很令人反感，它更适合在底部或与输入字段水平)而且我不想让它更大，因为我的网站大量使用了这些面板，我希望它看起来至少有点统一。

所以这让我认为肯定以前有人做过这个，并且 Bootstrap 中可能内置了一种方法来处理这样的事情，或者如果没有，谁能提出一个不太合适的解决方案被大量的类或 hacky 垂直对齐弄得臃肿？

我已将我的代码放在下面，但它是非常可预测的并且是相当通用的 Bootstrap 用法。

编辑:我试过类“input-sm”，它有帮助，但仍然存在明显的对齐问题。

    <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