css - Bootstrap - 选择和按钮彼此相邻

Question

我有一个 <select>和一个彼此相邻的按钮，想用 Bootstrap 来设计它们。 Select没有类看起来像这样:

select与 class="form-control"看起来像这样:

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

Answer 1

您可以包装 <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>

这样您就可以使用普通表单，只需将一个选择和按钮组合在一起。

查看 JSFiddle example