扩展bootstrap typeahead的宽度以匹配输入字段

Question

我知道这个问题至少被问过三次,但我看到的答案并不是我想要的.我希望增加twitter bootstrap使用其typeahead函数生成的自动完成字段的宽度.我一直在阅读它延伸到覆盖现场的所有文本.也就是说文本越长,自动完成字段越宽.但是我希望它是span6,因为这是我的搜索字段的宽度.有任何想法吗？我看到了一些jquery的答案,但我无法遵循它们.

Answer 1

Michael Watson在评论中给出了我认为最简单的答案.

.twitter-typeahead { width: 100%; } 

更新#1:基于以下(感谢史蒂夫,Vishi)的意见,对于做同样的.tt-hint,.tt-input,.tt-dropdown-menu.

更新#2: mlissner报告.tt-dropdown-menu现在.tt-menu,所以最终结果是

.twitter-typeahead, .tt-hint, .tt-input, .tt-menu { width: 100%; }

Answer 2

下拉菜单是一个ul,typeahead dropdown-menu您可以使用CSS来设置它的宽度:

.dropdown-menu
{
 width: .... px;
}

span6的宽度不是静态的,因此您需要一些媒体查询才能使其响应.

对于Bootstrap 3,从TB3中删除typeahead功能,而不是使用https://github.com/twitter/typeahead.js/.你需要一些额外的CSS来将它与Twitter的Bootstrap集成.您需要加载一些额外的CSS才能使typeahead.js下拉菜单适合默认的Bootstrap主题.尝试扩展Bootstrap的LESS,或者如果您正在寻找更多更扩展的版本,请尝试:typeahead.js-bootstrap3.less.

下拉菜单现在设置为.tt-dropdown-menu类.您可以尝试将宽度设置为动态,而不是更改CSS.使用typeahead输入标签类:

$('.typeahead').typeahead({})
on('typeahead:opened',function(){$('.tt-dropdown-menu').css('width',$('.typeahead').width() + 'px');});