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

强制Bootstrap的Typeahead下拉列表匹配自定义输入宽度

1 个答案: