选择字段作为输入组插件

Question

我想以<select>某种方式使用一个字段作为 Bootstrap3 的输入组插件

 -------------------------------------
|   select v   |   input text field   |
 -------------------------------------

所以，我认为实现这一目标使用.input-group，.input-group-addon以及.form-control类。

<div class="input-group">
    <select class="input-group-addon" id="protocol">
        <option>http://</option>
        <option>https://</option>
    </select>
    <input type="text" class="form-control" id="domain" aria-describedby="protocol">
</div>

（参见 bootply 示例）

但是该.input-group-addon课程似乎不适用于<select>物品。它看起来像这样：

我该如何修复以正确对齐它？

Answer 1

你只需要像这样用 with 类来包装你<select>的<div>.input-group-addon

<div class="input-group">
  <div class="input-group-addon">
    <select class="" id="protocol">
      <option>http://</option>
      <option>https://</option>
    </select>
  </div>
  <input class="form-control" id="domain" aria-describedby="protocol" type="text">
</div>

例子