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的预先输入,你需要一些额外的CSS(已弃用,不再维护).使用此CSS不能解决您的问题.

在您的示例中,输入字段的宽度不是100%.这将是由Javascript引起的.javascript将输入包装在一个范围内:

<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