Twitter Typeahead字段的Bootstrap按鈕

Question

我有一張表格。 使用Bootstrap3構建。 在這個表格上我有twitter typeahead字段。

我需要能夠在typeahead字段中嵌套一個按鈕，這是標准的bootstrap。

當表單加載時，按鈕是字段的一部分。 當鍵入字段時按鈕向下移動大約4個像素。

表單該部分的HTML是：

            <div class="form-group"> 
                <div  class="input-group" id="partTypeahead">  
                    <label for="Part Number">Part Number</label>
                    <input type="text" class="form-control input-sm typeahead" id="partNumber" placeholder="4+  Characters then Press Search" data-toggle="tooltip" data-placement="top" title="Enter At Least 4 Characters And Then Press Search Button">
                    <span class="input-group-btn">
                        <button class="btn btn-default btn-xs moveDown" type="button" id="showPart" data-toggle="tooltip" data-placement="right" title="Go to Part"><span class="glyphicon glyphicon-open"></span></button>
                    </span>
                </div>  
            </div>

我甚至嘗試在輸入字段時添加一個方法來修改按鈕的css，它只是忽略了類似的東西。

Answer 1

不確定這是否是您正在尋找的確切解決方案，請查看以下內容：

HTML：

<div class="form-group"> 
                <label for="Part Number">Part Number</label>
                <div class="input-group" id="partTypeahead">
                <input type="text" class="form-control input-sm typeahead" id="partNumber" placeholder="4+  Characters then Press Search" data-toggle="tooltip" data-placement="top" title="Enter At Least 4 Characters And Then Press Search Button">
                <span class="input-group-btn">
                <button class="btn btn-default btn-xs moveDown" type="button" id="showPart" data-toggle="tooltip" data-placement="right" title="Go to Part"><span class="glyphicon glyphicon-open"></span></button>
                </span>
</div> 

CSS：

label{
  display:block;
}

input,button{
  min-height:30px;
}

看看JSFiddle 。