twitter-bootstrap Typeahead.js 干扰 Bootstrap 输入组
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22276536/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Typeahead.js interferes with Bootstrap input groups
提问by caitlin
How do I keep Typeahead.js from splitting up my Twitter Bootstrap 3 input groups? Whenever I point the Typeahead javascript at a text area that's part of an input group, the joined text area and submit button stop being joined. Is this something that's just a bug in Typeahead, or is there a workaround for this?
如何防止 Typeahead.js 拆分我的 Twitter Bootstrap 3 输入组？每当我将 Typeahead javascript 指向作为输入组一部分的文本区域时，加入的文本区域和提交按钮将停止加入。这只是 Typeahead 中的一个错误，还是有解决方法？
Without loading Typeahead.JS:
不加载 Typeahead.JS：
With Typeahead.JS:
使用 Typeahead.JS：
My original HTML:
我的原始 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>
This is what Typeahead does to this HTML:
这就是 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>
采纳答案by daniel.sedlacek
This project partially solved the issue for me: https://github.com/hyspace/typeahead.js-bootstrap3.less
这个项目为我部分解决了这个问题：https: //github.com/hyspace/typeahead.js-bootstrap3.less
The only outstanding problem is when I apply shadow effect to both the .btn and .form-control the shadow is drawn also between the input field and the button.
唯一突出的问题是当我将阴影效果应用于 .btn 和 .form-control 时，阴影也会在输入字段和按钮之间绘制。
回答by Mahesh
.twitter-typeahead{ float:left; width:100%}
回答by Max Toro
Bootstrap v4 solution:
Bootstrap v4 解决方案：
.input-group > .twitter-typeahead {
flex: 1 1 auto;
width: auto;
}
回答by Robin Gomez
maybe?
或许？
.twitter-typeahead > .form-control{
width: inherit !important;
}
回答by Joric
This fixes the problem when the left-hand side of the text box is square (not rounded):
这解决了当文本框的左侧是方形（不是圆形）时的问题：
.input-group .twitter-typeahead .form-control:not(:first-child):not(:last-child) {
border-radius: 4px 0px 0px 4px;
}
