加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

twitter-bootstrap-3 – Typeahead js打破bootstrap内联形式

发布时间:2020-12-17 21:20:25 所属栏目:安全 来源:网络整理
导读:我有这样的形式: 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
我有这样的形式:

<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

项目代码标签未与文本框对齐,与其他字段对齐.

我该怎么办才能解决这个问题?

解决方法

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

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

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

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读