Select 字段作为输入组插件

Question

我想像这样使用 <select> 字段作为 Bootstrap3 的输入组插件

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

所以我假设使用 .input-group、.input-group-addon 和 .form-control classes 来实现。

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

(See bootply example)

但是 .input-group-addon class 似乎不适用于 <select> 项。它看起来像这样：

我怎样才能正确对齐它？

Answer 1

你只需要用 <div> 和 class .input-group-addon 包裹你的 <select> 像这样

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

Example

Answer 2

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

最好的解决方案是升级到 bootstrap 4.0+。通过升级到 4.0，您可以简单地执行此操作，一切都会变得漂亮漂亮 (v4.0 demo):

    <div class="input-group">
       <input type="text" class="form-control"/>
       <select class="input-group-addon">
           <option>Option 1</option>
           <option>Option 2</option>
       </select>
    </div>

由于您使用 Bootstrap v3 升级并不总是那么简单，这里是您的升级方式 (v3.x demo):

    <div class="custom-input-group input-group">
       <input type="text" class="form-control"/>
       <select class="custom-addon input-group-addon">
           <option>Option 1</option>
           <option>Option 2</option>
       </select>
    </div>

然后在 CSS 我们的自定义样式如下所示：

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

这将为我们提供一个 select 框，它像传统的 input-group-addon 一样排在输入框旁边。

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

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

Select 字段作为输入组插件

Select field as input group addon

html-select

html-input

twitter-bootstrap