Html Bootstrap 3 按钮组和输入组在一行中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18872664/
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 button-group and input-group in one row
提问by IT KFV
If you have a look at the following example, you can see that the input-group is below the button-group:
如果您查看以下示例，您可以看到输入组位于按钮组下方：
I already tried putting both groups into floating divs, but the browsers still break the row. I noticed that ".btn-group, .btn-group-vertical" contain a "display: inline-block". After commenting this line out, the row doesn't break, but I don't have a space between both div (although I thought to get one by "padding-right: 16px")
我已经尝试将两个组都放入浮动 div 中，但浏览器仍然打破了这一行。我注意到“.btn-group, .btn-group-vertical”包含一个“display: inline-block”。注释掉这一行后，该行不会中断，但两个 div 之间没有空格（虽然我想通过“填充右：16px”来获得一个）
回答by IT KFV
Found a working solution using table-display for containers:
找到了一个使用 table-display 容器的工作解决方案：
<div class="Toolbar">
<div>
<div class="btn-group">
<button id="ButtonCreate" class="btn btn-default btn-sm" onclick="CreateItem()" title="Erstellen"><span class="glyphicon glyphicon-file"></span></button>
<button id="ButtonUpdate" class="btn btn-default btn-sm" onclick="UpdateItem()" title="Bearbeiten"><span class="glyphicon glyphicon-pencil"></span></button>
<button id="ButtonDelete" class="btn btn-default btn-sm" onclick="DeleteItems()" title="Löschen"><span class="glyphicon glyphicon-trash"></span></button>
<button id="ButtonExport" class="btn btn-default btn-sm" onclick="ExportItems()" title="Exportieren"><span class="glyphicon glyphicon-export"></span></button>
</div>
</div>
<div>
<div class="input-group input-group-sm">
<span class="input-group-btn"><button id="ButtonSearch" class="btn btn-default btn-sm" onclick="SearchItem()" title="Suchen"><span class="glyphicon glyphicon-search"></span></button></span>
<input type="text" class="form-control" style="width: 300px;" placeholder="Suchen">
</div>
</div>
</div>
CSS (LESS):
CSS（较少）：
.Toolbar
{
position: relative;
display: table;
}
.Toolbar > div
{
display: table-cell;
padding-right: 8px;
vertical-align: top;
}
.Toolbar
{
.btn-group, .btn-group-vertical
{
vertical-align: inherit;
}
}
回答by Jakub Michálek
How about
怎么样
<div class="input-group input-group-sm">
<span class="input-group-btn btn-group-custom">
<button id="ButtonCreate" class="btn btn-default btn-sm" onclick="CreateItem()" title="Erstellen"><span class="glyphicon glyphicon-file"></span></button>
<button id="ButtonUpdate" class="btn btn-default btn-sm" onclick="UpdateItem()" title="Bearbeiten"><span class="glyphicon glyphicon-pencil"></span></button>
<button id="ButtonDelete" class="btn btn-default btn-sm" onclick="DeleteItems()" title="L?schen"><span class="glyphicon glyphicon-trash"></span></button>
<button id="ButtonExport" class="btn btn-default btn-sm" onclick="ExportItems()" title="Exportieren"><span class="glyphicon glyphicon-export"></span></button>
<button id="ButtonSearch" class="btn btn-default btn-sm" onclick="SearchItem()" title="Suchen"><span class="glyphicon glyphicon-search"></span></button>
</span>
<input class="form-control" style="width: 300px;" placeholder="Suchen" type="text">
</div>
You need to manually collapse borders and tweek them on hover and for the visaul space:
您需要手动折叠边框并在悬停和签证空间时调整它们：
.btn-group-custom .btn {
border-right-width: 0;
}
.btn-group-custom .btn:hover {
border-right-width: 1px;
}
.btn-group-custom .btn:hover + .btn {
border-left-width: 0;
}
#ButtonSearch {
border-left-width: 1px;
border-right-width: 0;
margin-left: 16px;
}
#ButtonExport {
border-right-width: 1px;
}
