Bootstrap 3.0 RC1的预先输出问题

Question

我正在尝试将Twitter Typeahead与Bootstrap 3 RC1一起使用，因为Bootstrap在版本3上删除了自己的typeahead插件。

我在表单上使用以下HTML：

<div class="well">  
<form>
    <fieldset>
        <div class="form-group">
            <label for="query">Search:</label>
            <input type="text" class="form-control" name="query" id="query" placeholder="Start typing something to search...">              
        </div>
        <button type="submit" class="btn btn-primary">Search</button>
    </fieldset>
</form>
</div>

如果不添加Typeahead，搜索输入字段将显示如下：

然后我添加了Typeahead，如下所示：

<script>
    $('#query').typeahead({        
        local: ['alpha', 'bravo','charlie','delta','epsilon','gamma','zulu']
    });
</script>

场地变小了，里面有一个白色的矩形。

我做错了什么，或者只是Typeahead或Bootstrap 3 RC1上的错误？

Answer 1

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的预先输入，您需要some extra CSS（已弃用，不再维护）。 使用此CSS无法解决您的问题。

在您的示例中，输入字段的宽度不是100％。这将是由Javascript引起的。 javascript将输入包装在span：

中

<span class="twitter-typeahead" 
    style="position: relative; display: inline-block; direction: ltr;">

此范围内没有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

Answer 2

查看typeahead.js-bootstrap3.less。

它与最新版本的Bootstrap（v3.0.3）配合使用，可以让您保留自定义主题。还有一个带有默认bootstrap主题的.css文件。

Answer 3

Typeahead.js css fix也有输入组问题（转角四舍五入），我发现它在模态上打破的某处信息等。 Additionaly https://github.com/jharding/typeahead.js-bootstrap.css已不再保留，因此我将尝试使用Bass Jobsen解决方案;）

Answer 4

经过大量的研究，没有运气添加样式，我终于修复了它在构造函数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());
}

Answer 5

而不是Twitter Typeahead，尝试使用bootstrap-select。该库已集成到Bootstrap 3中，具有更广泛的功能。