使用Bootstrap 3的Twitter Typeahead上的CSS问题
随着Bootstrap 3.Typehead的发布，已经删除了以下内容：
https://github.com/twitter/typeahead.js
我已经成功地将它集成到了远程数据获取上
但是我遇到了自动补全的问题
正如您所看到的，文本框中出现了两个文本。
我已经包含了文档中提到的css (https://github.com/jharding/typeahead.js-bootstrap.css)，但没有成功。
任何帮助或建议都将不胜感激。
显示问题的jsfiddle：
HTML
<body>
<div class="container">
<label>State</label> <input type="text" class="typeahead form-control" />
</div>
</body>Javascript
$('.typeahead').typeahead({
name: 'Some name',
local: ['test', 'abc', 'def']
})回答 14
Stack Overflow用户
发布于 2013-08-06 01:46:54
EDIT:针对Bootstrap 3.0 EDIT 2进行了更新: Typeahead调用已修改。请参阅新的jsfiddle
在处理完样式之后，看起来表单控件类与tt-hint并不完全一致。所以我确保了边距和边框对齐。采用Hieu Nguyen的答案并添加边框半径和对input-small/input-large的支持
CSS
.twitter-typeahead .tt-hint
{
display: block;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.428571429;
border: 1px solid transparent;
border-radius:4px;
}
.twitter-typeahead .hint-small
{
height: 30px;
padding: 5px 10px;
font-size: 12px;
border-radius: 3px;
line-height: 1.5;
}
.twitter-typeahead .hint-large
{
height: 45px;
padding: 10px 16px;
font-size: 18px;
border-radius: 6px;
line-height: 1.33;
}input-small/input-large的脚本
$('.typeahead.input-sm').siblings('input.tt-hint').addClass('hint-small');
$('.typeahead.input-lg').siblings('input.tt-hint').addClass('hint-large');更新的jsfiddle：http://jsfiddle.net/KrtB5/542/
Stack Overflow用户
发布于 2013-08-06 03:09:13
嗯，看起来.form-control是Bootstrap3RC中的一个新类，它是这个问题的罪魁祸首(毫无疑问，这只是一个有很多问题的RC版本)，你可以把那个类的样式复制到.tt-hint类中。所以：
.twitter-typeahead .tt-hint {
display: block;
height: 38px;
padding: 8px 12px;
font-size: 14px;
line-height: 1.428571429;
border: 1px solid transparent;
}工作小提琴：http://jsfiddle.net/KrtB5/2/
与jQuery 1.9.1和Bootstrap 3.0.0配合使用效果更好的更新：http://jsfiddle.net/KrtB5/13
Stack Overflow用户
发布于 2013-09-17 17:27:06
看看这个：
$('#foo').typeahead(...);
$('.tt-hint').addClass('form-control');https://stackoverflow.com/questions/18059161
复制相似问题