Bootstrap 3将控件添加到面板标题

Question

期望的结果: 在标题的左侧有一个包含标题的引导带面板和一个带有用于搜索的插件按钮的搜索文本字段.最后一个图标是一个选项/扳手按钮,用于设置一些面板主体选项.

现行代码:

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

工作实例

更新

如果你想让输入(我给它的ID #Special更小)和右对齐,你可以通过CSS做这样的事情:

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

HTML:

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

更新的示例