css - 强制 Bootstrap 的 Typeahead 下拉菜单匹配自定义输入宽度

Question

我正在使用 Bootstrap 的 Typeahead 并像这样添加输入:

<div class="row">
    <div class="span12">
        <form class="centered">
                <input id="main_search" type="text" class="search-query my-search" data-provide="typeahead">
        </form>
    </div>
</div>

我有以下 CSS 代码，它基本上只是将我的搜索框扩展为“长”并位于跨度的中间:

.centered {
    text-align:center;
}

/* Make the main search box wider */
.my-search { 
    width: 80%;
}

我的问题是，当我使用 Typeahead 时，自动完成的结果只是“必须”显示整个单词/短语，而我希望它们与实际输入框一样长。基本上就像您在 Google.com 上看到的一样，具有即时搜索功能。

This closed issue建议我应该能够操纵 CSS 来实现我想做的事情，但我不擅长复杂的 CSS，而且我正在努力使继承权恰到好处，以使任何 CSS 实际应用于正确的元素。最重要的是，我不确定如何确保下拉菜单继承输入的长度(这样即使浏览器调整大小它也能正常工作)。

感谢您提供的任何帮助!

当前代码: JSFiddle

Answer 1

如果您没有发布您的代码或工作示例的链接，这只是一个猜测，但试试这个 CSS

.my-search, .typeahead.dropdown-menu > li {
  width: 80% !important;
}