1

我正在使用 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 上看到的具有即时搜索功能的内容。

这个已关闭的问题表明我应该能够操纵 CSS 来实现我想要做的事情，但我不擅长复杂的 CSS，我正在努力让继承恰到好处，以使任何 CSS 真正应用于正确的元素。最重要的是，我不确定如何确保下拉菜单继承输入的长度（这样即使浏览器调整大小也能正常工作）。

感谢您提供的任何帮助！

当前代码： JSFiddle

4

1 回答 1

0

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

.my-search, .typeahead.dropdown-menu > li {
  width: 80% !important;
}
于 2013-07-19T20:06:41.753 回答