Bootstrap 3在面板标题中添加控件

Question

Bootstrap 3在面板标题中添加控件

10

期望结果： 有一个引导面板，左侧带有标题和一个搜索框，该搜索框旁边有一个附加按钮可进行搜索。最后一个图标是一个选项/扳手按钮，用于设置一些面板主体选项。

当前代码：

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

当前结果： 我希望面板标题在同一行上。随着我们逐渐缩小表单的尺寸，我会进行一些调整。但是当前的代码导致组件换行成多行。

- jswisher

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sebsemillia · Accepted Answer

只需在输入组中去掉.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">

更新的示例