选择字段作为输入组插件

Question

我想使用 ------------------------------------- | select v | input text field | ------------------------------------- 字段作为输入组插件与Bootstrap3以某种方式这样

.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> 类来实现这一目标。

.input-group-addon

（See bootply example）

但<select>课程似乎不适用于dict = data.table(name = c('none', 'ten', 'twenty'), number = c(0, 10, 20)) melt(dt, id.var = 'ID')[ dict, on = c(variable = 'name')][, median(rep(number, value)), by = ID] # ID V1 #1: 1 10 #2: 2 0 #3: 3 10 #4: 4 10 项目。它看起来像这样：

如何修复以正确对齐？

Answer 1

您只需将<select>用<div>包裹在.input-group-addon这样的<{p}}

<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

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

1）最佳解决方案是升级到bootstrap 4.0 +

通过升级到4.0，你可以简单地做到这一点，一切都会很好漂亮（v4.0 demo）：

            app.loadObj( {
            path: 'obj/',
            fileObj: 'prova.obj',
            pivot: pivotA,
            overdraw: true,
            instanceNo: 0
        } );

2）如果由于某种原因你无法升级，你可以这样做（v3.x 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>

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

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

这将为我们提供一个选择框，它与传统的.custom-input-group { position: relative; display: -ms-flexbox; display: flex; -ms-flex-align: stretch; align-items: stretch; width: 100%; } 之类的输入排在一起。

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

input-group-addon