gpt4 book ai didi

javascript - Typeahead.js 干扰 Bootstrap 输入组

转载 作者:技术小花猫 更新时间:2023-10-29 11:50:15 26 4
gpt4 key购买 nike

如何防止 Typeahead.js 拆分我的 Twitter Bootstrap 3 输入组?每当我将 Typeahead javascript 指向属于输入组的文本区域时,连接的文本区域和提交按钮就会停止连接。这只是 Typeahead 中的一个错误,还是有解决方法?

不加载 Typeahead.JS:

enter image description here

使用 Typeahead.JS:

enter image description here

我的原始 HTML:

    <div class="col-sm-4 hidden-xs">
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" id="tags" class="form-control" name="q">
<div class="input-group-btn">
<button class="btn btn-default" type="submit">Search</button>
</div>
</div>
</form>
</div>

这是 Typeahead 对这个 HTML 所做的:

<div class="col-sm-4 hidden-xs">
<form class="navbar-form" role="search">
<div class="input-group">
<span class="twitter-typeahead" style="position: relative; display: inline-block;">
<input type="text" class="form-control tt-hint" disabled="" autocomplete="off" spellcheck="false" style="position: absolute; top: 0px; left: 0px; border-color: transparent; box-shadow: none; background-attachment: scroll; background-clip: border-box; background-color: rgb(255, 255, 255); background-image: none; background-origin: padding-box; background-size: auto; background-position: 0% 0%; background-repeat: repeat repeat;">
<input type="text" id="tags" class="form-control tt-input" name="q" autocomplete="off" spellcheck="false" dir="auto" style="position: relative; vertical-align: top; background-color: transparent;">
<pre aria-hidden="true" style="position: absolute; visibility: hidden; white-space: nowrap; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 400; word-spacing: 0px; letter-spacing: 0px; text-indent: 0px; text-rendering: auto; text-transform: none;">
</pre>
<span class="tt-dropdown-menu" style="position: absolute; top: 100%; left: 0px; z-index: 100; display: none;"><div class="tt-dataset-0"></div>
</span>
</span>
<div class="input-group-btn">
<button class="btn btn-default" type="submit">Search</button>
</div>
</div>
</form>
</div>

最佳答案

.twitter-typeahead{ float:left; width:100%}

关于javascript - Typeahead.js 干扰 Bootstrap 输入组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22276536/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com