Twitter bootstrap 选择字段作为输入组加载项

我想使用一个

字段作为Bootstrap3的输入组插件

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

<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>

因此，我假设使用

.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>

http://
https://

（）

但是

.input组插件

类似乎不适用于

项。看起来是这样的：

.custom-input-group {
  position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: stretch;
    align-items: stretch;
    width: 100%;
}

---

如何修复以正确对齐此项？

您只需将

用类

将
包装起来。输入组加载项如下所示

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

<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>


http://
https://

经过几个小时的努力，我找到了两种解决方案，得到了如下结果：

.custom-input-group {
  position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: stretch;
    align-items: stretch;
    width: 100%;
}


最好的解决方案是升级到bootstrap 4.0+。通过升级到4.0，您可以简单地完成这项工作，一切都会井然有序（）：

这将为我们提供一个选择框，该框排列在输入旁边，如传统的
输入组插件

最后，您可能需要调整下拉列表的宽度：

.custom-addon {
/*You will need to add media queries to make this responsive.*/
 width: 28%;
}

另外请注意，对于3.x解决方案，按钮插件的宽度为1px，因此如果组中有按钮插件，则应将宽度设置为“自动”，以避免按钮溢出flex box。