twitter-bootstrap-3 - 为什么 typeahead.js tt-dropdown-menu 没有显示( Bootstrap 3)？

Question

这是我的 html。

<div class="container">
<div class="row">
    <div class="col-md-12">
        <div class="form-inline">
            <span>Looking for</span>
            <div class="form-group">
                <input type="text" class="form-control typeahead" placeholder="Name or PersonID" autocomplete="off">
            </div>
            <button id="btn-go" class="btn btn-primary">Go</button>
        </div>
    </div>
</div>

这是我的javascript:

var people = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: 'contact/search/?id=%QUERY'
});

people.initialize();

$('.typeahead').typeahead(null, {
    name: 'people',
    displayKey: 'value',
    source: people.ttAdapter(),
    templates: {
        suggestion: Handlebars.compile('<p><strong>{{fullname}}</strong> - {{personid}}</p>')
    }
}).on('typeahead:selected', function(obj, datum) {
    console.log(obj);
    console.log(datum);
});

一切正常，结果从服务器返回，下拉菜单被填充但不可见。似乎是 CSS 问题，但这正是我需要帮助的地方。为什么那个菜单是隐藏的？我已经检查了相关标签的“显示”或“z-index”等基础知识，但没有帮助。有任何想法吗？

顺便说一句，我正在使用我发现的 bootstrap 3 typeahed css here

编辑:

发现问题，请看下面我的回答。

Answer 1

发现 bootstrap 和/或 typeahead 没有问题。我的问题是 div.container 位于另一个 div 中，该 div 的溢出设置为隐藏。因此，当有问题的行是页面上的唯一元素时，由于溢出设置，下拉菜单被隐藏。删除它，一切都按预期工作。