jQuery 扩展 bootstrap typeahead 的宽度以匹配输入字段
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17957513/
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
extending the width of bootstrap typeahead to match input field
提问by NSaid
I know this question has been asked atleast three times before but the answer I saw were not what I was looking for. I am looking to increase the width of the autocomplete field that twitter bootstrap generates with its typeahead function. I have been reading that it stretches to cover all the text with in the field. that is to say that the longer the text, the wider the autocomplete field. However I would like it to be a span6 because that is how wide my search field is. Any ideas? I have seen some jquery answers but I couldn't follow them.
我知道这个问题之前至少被问过三次，但我看到的答案并不是我想要的。我希望增加 twitter bootstrap 使用其 typeahead 功能生成的自动完成字段的宽度。我一直在阅读它延伸到涵盖该领域的所有文本。也就是说，文本越长，自动完成字段就越宽。但是我希望它是一个 span6，因为那是我的搜索范围有多宽。有任何想法吗？我已经看到了一些 jquery 的答案，但我无法遵循它们。
回答by
Michael Watson gave what I think is the simplest answer in his comment.
Michael Watson 在他的评论中给出了我认为最简单的答案。
.twitter-typeahead { width: 100%; }
Update #1:Based on the comments below (thanks Steve, Vishi), do the same for .tt-hint, .tt-input, .tt-dropdown-menu.
更新 #1：根据下面的评论（感谢 Steve、Vishi），对.tt-hint, .tt-input,做同样的事情.tt-dropdown-menu。
Update #2:mlissner reports that .tt-dropdown-menuis now .tt-menu, so the end result is
更新 #2：mlissner 报告.tt-dropdown-menu现在是.tt-menu，所以最终结果是
.twitter-typeahead, .tt-hint, .tt-input, .tt-menu { width: 100%; }
回答by Bass Jobsen
The dropdown menu is a ul with the classes typeaheaddropdown-menuyou could use CSS to set it's width:
下拉菜单是一个 ul 类，typeaheaddropdown-menu你可以使用 CSS 来设置它的宽度：
.dropdown-menu
{
width: .... px;
}
The width of the span6 is not static, so you will need some media queries to make it responsive.
span6 的宽度不是静态的，因此您需要一些媒体查询以使其具有响应性。
For Bootstrap 3the typeahead function is remove from TB3 instead use https://github.com/twitter/typeahead.js/. You will need some additional CSSto integrate it with Twitter's Bootstrap.You'll need to load some additional CSS in order to get the typeahead.jsdropdown menu to fit the default Bootstrap's theme. Try extended Bootstrap's LESSor if your are looking for a more a more extended version try: typeahead.js-bootstrap3.less.
对于Bootstrap 3，从 TB3 中删除 typeahead 功能，而不是使用https://github.com/twitter/typeahead.js/。您将需要一些额外的 CSS以将其与 Twitter 的 Bootstrap 集成。您需要加载一些额外的 CSS 以使typeahead.js下拉菜单适合默认的 Bootstrap 主题。尝试扩展 Bootstrap 的 LESS或者如果您正在寻找更多扩展版本，请尝试：typeahead.js-bootstrap3.less。
The dropdown with is set with the .tt-dropdown-menu class now. In stead of changing the CSS you could also try to set the width dynamic. With typeahead a class of your typeahead input tag:
现在使用 .tt-dropdown-menu 类设置下拉菜单。除了更改 CSS，您还可以尝试设置动态宽度。使用 typeahead 一个 typeahead 输入标签的类：
$('.typeahead').typeahead({})
on('typeahead:opened',function(){$('.tt-dropdown-menu').css('width',$('.typeahead').width() + 'px');});
回答by Binary Logic
To make the dropdown match the field width you'd want something like this:
要使下拉列表与字段宽度匹配，您需要这样的内容：
$(document).on('typeahead:opened', function(event, datum) {
var width = $(event.target).width();
$('.tt-dropdown-menu').width(width);
});
Small improvement on the above using event.target and a global document listener.
使用 event.target 和全局文档侦听器对上述内容进行了小的改进。
回答by twoteesbrett
I'm using Bootstrap 3.2.0 with typeahead.js-bootstrap3.lessand nested the input in divs like this:
我将 Bootstrap 3.2.0 与typeahead.js-bootstrap3.less 一起使用，并将输入嵌套在 div 中，如下所示：
<div class="form-group">
<label>my label</label>
<div class="col-md-4">
<div class="input-group tt-input-group">
<input id="mytypeahead" class="form-control" />
</div>
</div>
</div>
I also needed to add this to my css:
我还需要将它添加到我的 css 中：
.tt-input-group {
width: 100%;
}
回答by Joe McLean
Here is a pure CSS solution:
这是一个纯 CSS 解决方案：
Since .dropdown-menuis positioned absolute, adding position: relative;to the div wrapping around your uib-typeaheadinput field and setting width: 100%;to your .dropdown-menuwill fix it.
由于.dropdown-menu是绝对定位，添加position: relative;到环绕uib-typeahead输入字段的 div并设置width: 100%;为您.dropdown-menu将修复它。
Your CSS would look something like this:
你的 CSS 看起来像这样：
.typeahead-search {
position: relative;
}
.dropdown-menu {
width: 100%;
}
回答by candleHyman
This is for newer versions:
这适用于较新的版本：
.twitter-typeahead, .tt-menu
{
display: block !important;
}
