twitter-bootstrap Bootstrap 3 向面板标题添加控件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24368457/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3 adding controls to a panel-heading
提问by jswisher
Desired Outcome:Have a boot strap panel that contains a title on the left of the heading and a search text field with a addon button for a search. The final icon would be an option/wrench button for setting some panel body options.
预期结果：有一个引导带面板，其中包含标题左侧的标题和一个带有用于搜索的插件按钮的搜索文本字段。最后一个图标将是一个选项/扳手按钮，用于设置一些面板主体选项。
Current Code:
当前代码：
<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>
Current Result:I desire the panel-header to be on one line. I will do some adjustments as we go to smaller form size. However the current code is causing the components to wrap onto multiple rows.
当前结果：我希望面板标题在一行上。当我们使用更小的表单尺寸时，我会做一些调整。然而，当前的代码导致组件包装到多行上。
回答by Sebsemillia
Just get rid of the .pull-rightclass in your input-group.
只需摆脱.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>
Update
更新
If you want the input (I gave it the ID #Special) smaller and right-aligned, you can do something like this via CSS:
如果您希望输入（我给它 ID #Special）更小且右对齐，您可以通过 CSS 执行以下操作：
#Special {
width: 200px;
float: right;
}
html:
html：
<input id="Special" type="text" class="form-control" placeholder="Search">
