CSS Bootstrap - 选择和按钮彼此相邻
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24573822/
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 - select and button next to each other
提问by Tschareck
I have a <select>and a button next to each other and wanted to style them with bootstrap.
Selectwithout class looks like this:
我有一个<select>和一个按钮，并想用引导程序来设计它们。
Select没有类看起来像这样：
selectwith class="form-control"looks like this:
select与class="form-control"这个样子的：
Notice, that the button is now underselect. I'm not sure, which CSS property is responsible for this. What should I change, to have button next to the select?
请注意，该按钮现在处于选中状态。我不确定，哪个 CSS 属性对此负责。我应该改变什么，在选择旁边有按钮？
采纳答案by BENARD Patrick
Following Boostrap syntax :
遵循 Boostrap 语法：
You should add form-inlineclass to your form, see the official doc
您应该form-inline在表单中添加类，请参阅官方文档
Official example
官方示例
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">@</div>
<input class="form-control" type="email" placeholder="Enter email">
</div>
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Password</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</form>
回答by Luke
You can wrap the <select>and the <button>in an input-group:
您可以将<select>和包装<button>在一个中input-group：
<div class="input-group">
<select class="form-control">
<option>Select option..</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
<span class="input-group-btn">
<button class="btn btn-default" type="button" tabindex="-1"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
</span>
</div>
This way you can use a normal form and just group one select and button together.
通过这种方式，您可以使用普通表单并将一个选择和按钮组合在一起。
Check out the JSFiddle example
回答by Francis
Another approach is to wrap the controls in a flexdiv:
另一种方法是将控件包装在一个flexdiv 中：
<div style="display: flex;">
<select class="form-control">...</select>
<!-- optional spacer: <div style="width: 8px;" /> -->
<button type="button" class="btn btn-default">Click Me!</button>
</div>
回答by MrUpsidown
Bootstrap 4
引导程序 4
Use helper classes! d-flexwill do just fine.
使用辅助类！d-flex会做的很好。
body {
padding-top: 20px;
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<div class="col-12">
<!-- Wrap your 2 elements in a d-flex -->
<div class="d-flex">
<select class="form-control mr-2">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<input type="button" class="btn btn-secondary" value="Select" />
</div>
</div>
</div>
</div>回答by NealM
As Luke stated, but use input-group-append for the button span. That get rid of the roundness on the button and makes for a better matchup.
正如 Luke 所说，但对按钮跨度使用 input-group-append。这样可以消除按钮上的圆度，从而实现更好的对位。
