jquery – 引导问题Bootstrap 3.0 RC1

我试图使用 Twitter Typeahead与Bootstrap 3 RC1，因为Bootstrap在版本3上删除了自己的typeahead插件。 @H_502_2@我在我的表单上使用以下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>

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

@H_502_2@然后我添加Typeahead这样：

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

@H_502_2@场变得更小，里面有一个白色的矩形。

@H_502_2@我做错了什么，或者它只是一个错误在Typeahead或Bootstrap 3 RC1？

解决方法

更新2014年4月14日 @H_502_2@正如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。

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

@H_502_2@Twitter的typeahead似乎不适合Twitter的Bootstrap 3。
要在Twitter的Bootstrap中使用Twitter的typeahead，您需要some extra CSS(已弃用，不再维护)。
使用这个CSS不能解决你的问题。

@H_502_2@在您的示例中，输入字段未获得100％的宽度。这将是由Javascript造成的。 javascript在一个span中包装输入：

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

@H_502_2@这个跨度没有得到100％所以输入里面。要修复添加到您的CSS：

.twitter-typeahead {
  width: 100%;
}

@H_502_2@Javascript将输入的背景颜色设置为透明。如果你不想更改插件源码，我需要一些额外的Javascript来解决这个问题：

$('.tt-query').css('background-color','#fff');

@H_502_2@现在应该根据您的例子按预期工作。 http://www.bootply.com/73439

@H_502_2@更新

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

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

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

jquery – 引导问题Bootstrap 3.0 RC1

解决方法

猜你在找的jQuery相关文章