带有Twitter Typeahead字段的引导程序按钮

Question

我有一个表格。由Bootstrap3构建。在此表格上，我有Twitter 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。