Html 输入附加引导的对齐问题

我有一个btn组，它给了我一个可编辑的组合框。唯一的问题是它没有正确对齐

这是当前框-

新变化

您缺少一些容器类，例如

表单控件

和

输入组

下面是代码的一个工作示例：

<div class="input-group">
  <input type="text" class="form-control" id="errorcount" size="16" value="Error">
  <div class="input-group-btn">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu dropdown-menu-right" id="dropdown-menu">
      <li><a class="dropdown-item" href="#"><i class="icon-pencil"></i>less than 1,000</a></li>
      <li><a class="dropdown-item" href="#"><i class="icon-pencil"></i>1,000 - 5,000</a></li>
    </ul>
  </div>
</div>

---

jsFiddle here:

它工作得非常完美，唯一的问题是即使在添加了input-sm之后，它仍然非常长。只需将它放在一个容器div中，大小与您想要的一样。例如：谢谢Kodie…但是我仍然有这个问题，这个组件是html表的一部分，我已经添加了mockup@user1050619如果你能把整个表放在一个jsfiddle中，我会更好地帮助你。嗯，我猜这与它在一个表单元格中有关。我可以通过在文本字段中添加

style=“width:calc（100%-34px）；”

来解决这个问题。

<div class="input-group">
                          <input type="text" class="input-sm" id="errorcount" size="" value="Error">
                          <div class="input-group">
                            <button type="button" class="btn btn-primary dropdown-toggle pull-right" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                              <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-right" id="dropdown-menu">
                              <li><a href="#"><i class="icon-pencil"></i>less than 1,000</a></li>
                                <li><a href="#"><i class="icon-pencil"></i>1,000 - 5,000</a></li>

                            </ul>
                            </div>
                    </div>

<div class="input-group">
  <input type="text" class="form-control" id="errorcount" size="16" value="Error">
  <div class="input-group-btn">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu dropdown-menu-right" id="dropdown-menu">
      <li><a class="dropdown-item" href="#"><i class="icon-pencil"></i>less than 1,000</a></li>
      <li><a class="dropdown-item" href="#"><i class="icon-pencil"></i>1,000 - 5,000</a></li>
    </ul>
  </div>
</div>