twitter-bootstrap-3 - Typeahead js 破坏了 bootstrap 内联形式

Question

我有这个表格:

<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 后看起来像这样:

PIC LINK

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

我该怎么做才能修复它？

Answer 1

Typeahead.js 将“vertical-align:top”设置为输入元素，这导致了您的问题(请参阅 typeahead.bundle.js 中的第 753 行和第 758 行)

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

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