选择字段作为输入组插件

Posted 2023-03-05

【中文标题】选择字段作为输入组插件

【英文标题】：Select field as input group addon

【发布时间】：2016-10-01 10:59:42

【问题描述】：

我想以某种方式使用 <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>

(See bootply example)

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

我该如何解决才能正确对齐？

【参考方案1】：

你只需要像这样用<div> 用.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

【参考方案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%;

这将为我们提供一个选择框，该框与传统的 input-group-addon 类似的输入旁边排列。

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

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

【讨论】：

还要注意，对于 3.x 解决方案，按钮插件是 1px 宽，所以如果你的组中有一个按钮插件，你应该将宽度设置为自动以避免按钮溢出弹性框.