jquery - 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 一起使用。

或者使用“旧”(TB 2) 插件和新的 Bloodhound 建议引擎:https://github.com/bassjobsen/Bootstrap-3-Typeahead/issues/26

<小时/>

Twitter 的 typeahead 似乎还没有为 Twitter 的 Bootstrap 3 做好准备。要将 Twitter 的 typeahead 与 Twitter 的 Bootstrap 结合使用，您需要 some extra 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