輸入附加引導對齊問題

Question

我有一個btn組給我一個可編輯的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/