Question

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

Answer 1

迈克尔沃森在评论中给出了我认为最简单的答案。

.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 dropdown-menu类的ul，您可以使用CSS来设置它的宽度：

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

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

对于 Bootstrap 3 ，从TB3中删除预先输入功能，而不是使用https://github.com/twitter/typeahead.js/。 ~~你需要一些additional CSS来将它与Twitter的Bootstrap集成。~~你需要加载一些额外的CSS才能获得typeahead.js下拉菜单以适应默认的Bootstrap主题。试试extended Bootstrap's 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中嵌套输入：

<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>

我还需要将此添加到我的css中：

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

Answer 5

这是一个纯CSS解决方案：

由于.dropdown-menu的位置是绝对的，因此将position: relative;添加到环绕uib-typeahead输入字段的div中并将width: 100%;设置为.dropdown-menu即可解决此问题。

您的CSS看起来像这样：

.typeahead-search {
    position: relative;
}

.dropdown-menu {
    width: 100%;
}

Answer 6

这适用于较新版本：

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

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

6 个答案: