输入附加引导程序的对齐问题

Question

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

这是当前的方框 -

<div class="input-append btn-group form-control">
  <input class="input-sm span2" id="errorcount" size="16" type="text" value="Error">
  <ul class="dropdown-menu" 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>
    <li><a href="#"><i class="icon-pencil">                        
  </ul>
  <a class="btn btn-primary dropdown-toggle pull-right" data-toggle="dropdown" href="#">
    <span class="caret"></span>
  </a>
</div>

新变化

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

Answer 1

您错过了一些容器类，例如form-control和input-group。

以下是您的代码的工作示例：

<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这里：https://jsfiddle.net/5g6c281b/