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 。