为什么typeahead.js tt-dropdown-menu不显示（引导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

编辑：

发现了问题，请在下面查看我的答案。

Answer 1

发现引导程序和/或预输入没有问题。对我来说，问题是div.container位于另一个div内，该div的溢出设置为隐藏。因此，当相关行是页面上的唯一元素时，由于溢出设置，下拉菜单被隐藏了。删除它，一切都按预期工作。