twitter-bootstrap - Bootstrap 3 向面板标题添加控件

Question

期望结果:
有一个 Bootstrap 面板，其中包含标题左侧的标题和一个带有用于搜索的插件按钮的搜索文本字段。最后一个图标将是一个选项/ Spanner 按钮，用于设置一些面板主体选项。

当前代码:

    <div class="container">
    <div class="panel panel-primary">
        <div class="panel-heading clearfix">
            <h4 class="panel-title pull-left" style="padding-top: 7.5px;">Panel header</h4>
                <div class="input-group pull-right">
                    <input type="text" class="form-control" placeholder="Search">
                    <div class="input-group-btn">
                        <button class="btn btn-primary"><i class="glyphicon glyphicon-search"></i></button>
                        <button class="btn btn-primary"><i class="glyphicon glyphicon-wrench"></i></button>
                    </div>
                </div>
        </div>
        <div class="panel-body">
            Panel content
        </div>
    </div>
</div>

当前结果:
我希望面板标题位于一条线上。当我们缩小表格尺寸时，我会做一些调整。但是，当前代码导致组件包装到多行。

Answer 1

只需摆脱 .pull-right输入组中的类。

<div class="container">
    <div class="panel panel-primary">
        <div class="panel-heading clearfix">
            <h4 class="panel-title pull-left" style="padding-top: 7.5px;">Panel header</h4>
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="Search">
                    <div class="input-group-btn">
                        <button class="btn btn-primary"><i class="glyphicon glyphicon-search"></i></button>
                        <button class="btn btn-primary"><i class="glyphicon glyphicon-wrench"></i></button>
                    </div>
                </div>
        </div>
        <div class="panel-body">
            Panel content
        </div>
    </div>
</div>

Working Example

更新

如果您希望输入(我给它的 ID #Special )更小且右对齐，您可以通过 CSS 执行以下操作:

#Special { 
    width: 200px; 
    float: right;
}

html:

<input id="Special" type="text" class="form-control" placeholder="Search">

Updated Example