扩展引导输入的宽度以匹配输入字段

Question

我知道这个问题之前至少被问过 3 次，但我看到的答案不是我想要的。我希望增加 twitter bootstrap 使用其 typeahead 功能生成的自动完成字段的宽度。我一直在阅读它可以覆盖该字段中的所有文本。也就是说，文本越长，自动完成字段越宽。但是我希望它是一个 span6，因为这就是我的搜索字段的宽度。有任何想法吗？我已经看到了一些 jquery 的答案，但我无法关注它们。

Answer 1

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

.twitter-typeahead { width: 100%; } 

更新 #1：基于以下 cmets（感谢 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

下拉菜单是一个带有typeaheaddropdown-menu类的ul，你可以使用CSS来设置它的宽度：

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

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

对于 Bootstrap 3，typeahead 功能已从 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').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;
}