Twitter bootstrap 3 Typeahead js中断引导程序内联表单

我有以下表格：

<form role="form" class="form-inline" name="frmUserData" id="frmUserData">
    <div class="form-group">
        <label for="txtlitm">Item Code:</label>
        <input type="text" class="form-control" id="txtlitm" name="txtlitm" autocomplete="off">
    </div>
    <div class="form-group">
        <label for="txtmcu">Branch Plant (filter):</label>
        <input type="text" class="form-control" id="txtmcu" name="txtmcu">
    </div>
    <div class="form-group">
        <label for="txtlocn">Location (filter):</label>
        <input type="text" class="form-control" id="txtlocn" name='txtlocn'>
    </div>
    <div class="form-group">
        <button type="button" class="pull-left btn btn-default" id="btnGO">
            Search
        </button>
    </div>
</form>

项目代码：
分厂（过滤器）：
位置（过滤器）：
搜寻

在我启用typeahead.js之后，看起来是这样的：

与其他字段一样，项目代码标签与文本框不对齐

---

我能做些什么来修复它呢？

也许设置列大小可以解决这个问题：

<div class="form-group">
   <label class="col-sm-2">Item Code:</label>
   <div class="col-sm-2">
       <input type="text" class="form-control" id="txtlitm" name="txtlitm" autocomplete="off">
   </div>
</div>

<div class="form-group">
    <label class="col-sm-2">Branch Plant (filter):</label>
    <div class="col-sm-2">
        <input type="text" class="form-control" id="txtmcu" name="txtmcu">
    </div>
</div>
<div class="form-group">
        <label class="col-sm-2">Location (filter):</label>
        <div class="col-sm-2">
            <input type="text" class="form-control" id="txtlocn" name='txtlocn'>
        </div>
    </div>

项目代码：
分厂（过滤器）：
位置（过滤器）：

Typeahead.js将“垂直对齐：顶部”设置到输入元素，这导致了您的问题（请参阅Typeahead.bundle.js中的第753行和第758行）

您可以在JS中更改它或通过CSS覆盖它：

.form-inline .form-control {
    vertical-align: middle !important;
}