Bootstrap - 选择和按钮彼此相邻

I have a <select> and a button next to each other and wanted to style them with bootstrap. Select without class looks like this:

我有一个和一个按钮彼此相邻，并希望使用bootstrap来设置它们的样式。没有类的选择看起来像这样：

select with class="form-control" looks like this:

select with class =“form-control”如下所示：

Notice, that the button is now under select. I'm not sure, which CSS property is responsible for this. What should I change, to have button next to the select?

请注意，该按钮现在处于选择状态。我不确定，哪个CSS属性对此负责。我应该改变什么，在选择旁边有按钮？

2 个解决方案

#1

Following Boostrap syntax :

遵循Boostrap语法：

You should add form-inline class 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>

#2

You can wrap the <select> and the <button> in an 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

查看JSFiddle示例