Typeahead js 打破了引导内联形式答案

【问题标题】：Typeahead js breaks bootstrap inline-formTypeahead js 打破了引导内联形式
【发布时间】：2014-07-26 17:01:52
【问题描述】：

我有这个表格：

<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

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

我能做些什么来解决它？

【问题讨论】：

标签： twitter-bootstrap-3 typeahead.js

【解决方案1】：

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

可以在 JS 中更改，也可以通过 CSS 覆盖：

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

【讨论】：

【解决方案2】：

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

<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>

【讨论】：