javascript - 还有其他人在设计 Twitter Typeahead 的搜索栏时遇到问题吗？

Question

我在设计 Twitter Typeahead 的搜索栏时遇到了非常困难的问题。添加 Typeahead javascript 似乎向我的搜索栏添加了三个新类，.twitter-typeahead、.tt-hint 和 .tt-input，每一个都以不同的、奇怪的方式表现。

首先，在我添加 Typeahead 后，搜索栏的背景被设置为透明，尽管我已经使用不同的类将其设置为白色，因此我不得不添加一个白色背景包装器，其中包含所有三个新类。给予 .typeahead width: 100%;高度:100%； border-radius: 20px;适合包装器的边界半径和高度，但比包装器短约 50px。 .tt-input 完全适合高度和宽度，但这显然是使背景透明的原因，因为 .tt-input 和 之间大约有 50px 的差异.twitter-typeahead 是背景颜色，而不是白色包装。最后，.tt-hint 只遵循颜色。它是白色的，但当我尝试设置边框半径、高度或宽度时它没有响应。

如果显式设置这些类的属性似乎无法设置它们的样式，我不得不得出结论，还有其他我找不到的类在起作用。那，或者 Typeahead 的代码中存在错误。

有没有人遇到过这样的事情？有谁知道为什么这三个类可能不响应 css？我已经无计可施了。

Answer 1

您的 css 被覆盖的原因是因为 Typeahead.js 使用 javascript 添加 css 并更改样式。由于所有这些都是在您的 css 加载到页面之后发生的，因此它具有优先权并搞砸了您已经做过的事情。

我注意到您正在使用 Bootstrap。检查这个已打开的问题 https://github.com/twitter/typeahead.js/issues/378前一段时间，它可以帮助您在使用 Bootstrap 框架时提前输入样式。 Jharding(维护 typeahead 的人)确实在该链接中提到了一些有趣的事情:

Someone asks: "@jharding If you have no interest in writing “an official Bootstrap library” how about re-factoring it so the CSS is actually controllable by users without resorting to using the !important keyword, and let them decide if they want Bootstrap styles or not."

@jharding: Will be possible in v0.11.

因此看起来您必须等待更新版本的 Typeaway 才能更自由地设置样式。