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

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

Answer 1

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

.twitter-typeahead { width: 100%; } 

更新＃1：根据以下评论（感谢Steve，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

下拉菜单是一个带类typeahead下拉菜单的ul，您可以使用CSS来设置它的宽度：

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

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

对于Bootstrap 3 ，从TB3中删除typeaheadfunction，而不是使用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');}); 

Answer 3

要使下拉列表与字段宽度匹配，您需要以下内容：

 $(document).on('typeahead:opened', function(event, datum) { var width = $(event.target).width(); $('.tt-dropdown-menu').width(width); }); 

使用event.target和全局文档侦听器对上面的小改进。

Answer 4

我正在使用带有typeahead.js-bootstrap3.less的 Bootstrap 3.2.0并在div中嵌套输入，如下所示：

 
 my label 
 
  
 
  

我还需要将它添加到我的CSS中：

 .tt-input-group { width: 100%; } 

Answer 5

这适用于较新的版本：

 .twitter-typeahead, .tt-menu { display: block !important; }