Bootstrap 3.0 RC1的预先输出问题
我正在尝试使用Twitter Typeahead和Bootstrap 3 RC1，因为Bootstrap在版本3上删除了自己的typeahead插件。
我在表单上使用以下HTML：
在不添加Typeahead的情况下，搜索输入字段显示如下：
然后我添加了Typeahead，如下所示：
$('#query').typeahead({ local: ['alpha', 'bravo','charlie','delta','epsilon','gamma','zulu'] });
场地变小了，里面有一个白色的矩形。
我做错了什么，或者只是Typeahead或Bootstrap 3 RC1上的错误？
2014年2月14日更新
如laurent-wartel所述， 请尝试https://github.com/hyspace/typeahead.js-bootstrap3.less或https://github.com/bassjobsen/typeahead.js-bootstrap-css以获取其他CSS使用typeahead.js使用Bootstrap 3.1.0。
或者使用新的Bloodhound建议引擎使用“旧”（TB 2）插件： https ： //github.com/bassjobsen/Bootstrap-3-Typeahead/issues/26
Twitter的预先准备好似乎没有为Twitter的Bootstrap 3做好准备。要在Twitter的Bootstrap中使用Twitter的预先输入，您将需要一些额外的CSS （已弃用，不再维护）。 使用此CSS不能解决您的问题。
在您的示例中，输入字段的宽度不是100％。 这将是由Javascript引起的。 javascript将输入包装在一个范围内：
这个范围没有100％，所以输入内部。 要修复添加到CSS：
.twitter-typeahead { width: 100%; }
Javascript将输入的背景颜色设置为透明。 如果您不想更改插件源，我需要一些额外的Javascript来解决此问题：
$('.tt-query').css('background-color','#fff');
现在应该根据您的示例按预期工作。 http://www.bootply.com/73439
更新
最初的问题是针对Twitter的Bootstrap 3.0.0的RC1。 你还需要添加：
.tt-dropdown-menu { width:100%; }
新的bootply： http ：//bootply.com/86305
看看typeahead.js-bootstrap3.less 。
它与最新版本的Bootstrap（v3.0.3）配合使用，可以让您保持自定义主题。 还有一个带有默认引导程序主题的.css文件。
Typeahead.js css fix也有输入组问题（转角舍入），我发现它在模态上打破的某处信息等.Additionaly https://github.com/jharding/typeahead.js-bootstrap.css不再保留所以我打算尝试一下Bass Jobsen解决方案;）
经过大量的研究，没有运气添加样式，我终于修复了它在构造函数Typeahead中添加一行（bootstrap.js或bootstrap-typeahead.js，具体取决于您的版本）：
这$ menu.width（此$ element.outerWidth（））;
这是代码：
/* TYPEAHEAD PUBLIC CLASS DEFINITION * ================================= */ var Typeahead = function (element, options) { this.$element = $(element) this.options = $.extend({}, $.fn.typeahead.defaults, options) this.matcher = this.options.matcher || this.matcher this.sorter = this.options.sorter || this.sorter this.highlighter = this.options.highlighter || this.highlighter this.updater = this.options.updater || this.updater this.source = this.options.source this.$menu = $(this.options.menu) this.shown = false this.listen() this.$menu.width(this.$element.outerWidth()); }
而不是Twitter Typeahead，尝试使用bootstrap-select 。 该库集成在Bootstrap 3中，具有更广泛的function。