jquery – 引导问题Bootstrap 3.0 RC1

我试图使用 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？

解决方法

更新2014年4月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的typeahead似乎不适合Twitter的Bootstrap 3。
要在Twitter的Bootstrap中使用Twitter的typeahead，您需要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

更新

原来的问题是RC1的Twitter的Bootstrap 3.0.0。您还需要添加：

.tt-dropdown-menu {
   width:100%;        
}

新bootply：http://bootply.com/86305

jquery – 引导问题Bootstrap 3.0 RC1

解决方法

猜你在找的jQuery相关文章