javascript - 带有 Twitter Typeahead 字段的 Bootstrap 按钮

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 .