在Bootstrap 3的Twitter Typeahead上的CSS问题
随着Bootstrap 3的发布，Typeahead已经被删除，
twitter/typeahead.html
我已经成功地将它集成在远程数据读取上
但我有自动完成问题
正如你所看到的那样，文本框上出现了两个文本。
我已经包含在文档中说的CSS（ https://github.com/jharding/typeahead.js-bootstrap.css ），但没有运气。
任何帮助或build议，将不胜感激。
显示问题的jsfiddle：
http://jsfiddle.net/KrtB5/
HTML
<body> <div class="container"> <label>State</label> <input type="text" class="typeahead form-control" /> </div> </body> Javascript ：
$('.typeahead').typeahead({ name: 'Some name', local: ['test', 'abc', 'def'] })
编辑：更新Bootstrap 3.0 编辑2：Typeahead调用被修改。 看到新的jsfiddle
在玩弄风格之后，它看起来像是表单控制类与tt-hint不太一致。 所以我确定边界和边界是一致的。 拿Hieu Nguyen的答案，增加边界半径，支持小投入/大投入
CSS
.twitter-typeahead .tt-hint { display: block; height: 34px; padding: 6px 12px; font-size: 14px; line-height: 1.428571429; border: 1px solid transparent; border-radius:4px; } .twitter-typeahead .hint-small { height: 30px; padding: 5px 10px; font-size: 12px; border-radius: 3px; line-height: 1.5; } .twitter-typeahead .hint-large { height: 45px; padding: 10px 16px; font-size: 18px; border-radius: 6px; line-height: 1.33; }
input小/input大的脚本
$('.typeahead.input-sm').siblings('input.tt-hint').addClass('hint-small'); $('.typeahead.input-lg').siblings('input.tt-hint').addClass('hint-large');
更新了jsfiddle： http : //jsfiddle.net/KrtB5/542/
嗯，它看起来像.form-control是Bootstrap 3 RC中的一个新类，它是这个问题的罪魁祸首（毫无疑问，这是唯一的RC版本有很多问题），你可以复制该类的风格到.tt-hint类。 所以：
.twitter-typeahead .tt-hint { display: block; height: 38px; padding: 8px 12px; font-size: 14px; line-height: 1.428571429; border: 1px solid transparent; }
工作小提琴： http : //jsfiddle.net/KrtB5/2/
使用jQuery 1.9.1和Bootstrap 3.0.0更好的更新 ： http : //jsfiddle.net/KrtB5/13
看一下这个：
$('#foo').typeahead(...); $('.tt-hint').addClass('form-control');
还有一个Bootstrap 2 typeahead插件的非官方端口：
Bootstrap 3 Typeahead
它不需要任何额外的CSS，它可以与最新版本的Bootstrap一起使用。
这是一个Plunker 演示 。
.tt -hint不仅是brocken，还有其他的css-classes。
在所有浏览器中工作的最佳解决scheme是添加额外的CSS，它修复Typeahead.js和Bootstrap 3之间的css问题：
如果你正在使用bootstrap.less，那就更容易了。 BS 3安装了LESS 1.4.1，现在包括“扩展”的好处。 请参阅Less和Bootstrap：如何使用span3（或spanX [任意数量]）类作为mixin？
延长现在是LESS的杀手function。 您现在可以完全inheritance（显式命名）类。 所以不需要像Hieu Nguyen和Nick P的CSS答案那样复制属性。 LESS会做到这一切：
.twitter-typeahead .tt-hint:extend(.form-control all) {}
为BS 3打破了https://github.com/jharding/typeahead.js-bootstrap.css/blob/master/typeahead.js-bootstrap.less更less的代码。我用它作为起点，并且还添加了制作下拉式不是按照BS 2键入的自动换行。 我最后的less文件是：
.tt-dropdown-menu { min-width: 160px; margin-top: 2px; padding: 5px 0; /* from BS dropdowns.less .dropdown-menu */ /* background-color: @dropdownBackground;*/ background-color: @dropdown-bg; /* border: 1px solid #ccc; border: 1px solid @dropdownBorder; border: 1px solid @dropdownBorder;*/ border: 1px solid @dropdown-fallback-border; // IE8 fallback border: 1px solid @dropdown-border; *border-right-width: 2px; *border-bottom-width: 2px; /*BS2 replaced with BS dropdowns.less .dropdown-menu*/ /*.border-radius(6px);*/ border-radius: 6px; /*.box-shadow(0 5px 10px rgba(0,0,0,.2)); -webkit-background-clip: padding-box; -moz-background-clip: padding;*/ .box-shadow(0 6px 12px rgba(0,0,0,.175)); background-clip: padding-box; } .tt-suggestion { display: block; padding: 3px 20px; } .tt-suggestion.tt-is-under-cursor { /*color: @dropdownLinkColorHover; #gradient > .vertical(@dropdownLinkBackgroundHover, darken(@dropdownLinkBackgroundHover, 5%));*/ color: @dropdown-link-hover-color; background-color: @dropdown-link-hover-bg; } .tt-suggestion.tt-is-under-cursor a { /*color: @dropdownBackground;*/ color: @dropdown-bg; } .tt-suggestion > p { margin: 0; white-space: nowrap !important; //dont conform suggestion to parent input width } /*https://stackoverflow.com/questions/18059161/css-issue-on-twitter-typeahead-with-bootstrap-3*/ .twitter-typeahead { display: block; width: 100%; //BS 3 needs this to inherit this for children } .twitter-typeahead .tt-hint:extend(.form-control all) { color: @input-color-placeholder; //show hint distinct from input }
一个全面的解决scheme（在Typeahead的这个错误报告中推荐）
https://github.com/hyspace/typeahead.js-bootstrap3.less/blob/master/typeahead.css
/* * typehead.js-bootstrap3.less * @version 0.2.3 * https://github.com/hyspace/typeahead.js-bootstrap3.less * * Licensed under the MIT license: * http://www.opensource.org/licenses/MIT */ .has-warning .twitter-typeahead .tt-input, .has-warning .twitter-typeahead .tt-hint { border-color: #8a6d3b; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); } .has-warning .twitter-typeahead .tt-input:focus, .has-warning .twitter-typeahead .tt-hint:focus { border-color: #66512c; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b; } .has-error .twitter-typeahead .tt-input, .has-error .twitter-typeahead .tt-hint { border-color: #a94442; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); } .has-error .twitter-typeahead .tt-input:focus, .has-error .twitter-typeahead .tt-hint:focus { border-color: #843534; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483; } .has-success .twitter-typeahead .tt-input, .has-success .twitter-typeahead .tt-hint { border-color: #3c763d; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); } .has-success .twitter-typeahead .tt-input:focus, .has-success .twitter-typeahead .tt-hint:focus { border-color: #2b542c; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168; } .input-group .twitter-typeahead:first-child .tt-input, .input-group .twitter-typeahead:first-child .tt-hint { border-bottom-left-radius: 4px; border-top-left-radius: 4px; } .input-group .twitter-typeahead:last-child .tt-input, .input-group .twitter-typeahead:last-child .tt-hint { border-bottom-right-radius: 4px; border-top-right-radius: 4px; } .input-group.input-group-sm .twitter-typeahead .tt-input, .input-group.input-group-sm .twitter-typeahead .tt-hint { height: 30px; padding: 5px 10px; font-size: 12px; line-height: 1.5; border-radius: 3px; } select.input-group.input-group-sm .twitter-typeahead .tt-input, select.input-group.input-group-sm .twitter-typeahead .tt-hint { height: 30px; line-height: 30px; } textarea.input-group.input-group-sm .twitter-typeahead .tt-input, textarea.input-group.input-group-sm .twitter-typeahead .tt-hint, select[multiple].input-group.input-group-sm .twitter-typeahead .tt-input, select[multiple].input-group.input-group-sm .twitter-typeahead .tt-hint { height: auto; } .input-group.input-group-sm .twitter-typeahead:not(:first-child):not(:last-child) .tt-input, .input-group.input-group-sm .twitter-typeahead:not(:first-child):not(:last-child) .tt-hint { border-radius: 0; } .input-group.input-group-sm .twitter-typeahead:first-child .tt-input, .input-group.input-group-sm .twitter-typeahead:first-child .tt-hint { border-bottom-left-radius: 3px; border-top-left-radius: 3px; border-bottom-right-radius: 0; border-top-right-radius: 0; } .input-group.input-group-sm .twitter-typeahead:last-child .tt-input, .input-group.input-group-sm .twitter-typeahead:last-child .tt-hint { border-bottom-left-radius: 0; border-top-left-radius: 0; border-bottom-right-radius: 3px; border-top-right-radius: 3px; } .input-group.input-group-lg .twitter-typeahead .tt-input, .input-group.input-group-lg .twitter-typeahead .tt-hint { height: 46px; padding: 10px 16px; font-size: 18px; line-height: 1.33; border-radius: 6px; } select.input-group.input-group-lg .twitter-typeahead .tt-input, select.input-group.input-group-lg .twitter-typeahead .tt-hint { height: 46px; line-height: 46px; } textarea.input-group.input-group-lg .twitter-typeahead .tt-input, textarea.input-group.input-group-lg .twitter-typeahead .tt-hint, select[multiple].input-group.input-group-lg .twitter-typeahead .tt-input, select[multiple].input-group.input-group-lg .twitter-typeahead .tt-hint { height: auto; } .input-group.input-group-lg .twitter-typeahead:not(:first-child):not(:last-child) .tt-input, .input-group.input-group-lg .twitter-typeahead:not(:first-child):not(:last-child) .tt-hint { border-radius: 0; } .input-group.input-group-lg .twitter-typeahead:first-child .tt-input, .input-group.input-group-lg .twitter-typeahead:first-child .tt-hint { border-bottom-left-radius: 6px; border-top-left-radius: 6px; border-bottom-right-radius: 0; border-top-right-radius: 0; } .input-group.input-group-lg .twitter-typeahead:last-child .tt-input, .input-group.input-group-lg .twitter-typeahead:last-child .tt-hint { border-bottom-left-radius: 0; border-top-left-radius: 0; border-bottom-right-radius: 6px; border-top-right-radius: 6px; } .twitter-typeahead { width: 100%; } .input-group .twitter-typeahead { display: table-cell !important; float: left; } .twitter-typeahead .tt-hint { color: #999999; } .twitter-typeahead .tt-input { z-index: 2; } .twitter-typeahead .tt-input[disabled], .twitter-typeahead .tt-input[readonly], fieldset[disabled] .twitter-typeahead .tt-input { cursor: not-allowed; background-color: #eeeeee !important; } .tt-dropdown-menu { position: absolute; top: 100%; left: 0; z-index: 1000; min-width: 160px; width: 100%; padding: 5px 0; margin: 2px 0 0; list-style: none; font-size: 14px; background-color: #ffffff; border: 1px solid #cccccc; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 4px; -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); background-clip: padding-box; *border-right-width: 2px; *border-bottom-width: 2px; } .tt-dropdown-menu .tt-suggestion { display: block; padding: 3px 20px; clear: both; font-weight: normal; line-height: 1.42857143; color: #333333; white-space: nowrap; } .tt-dropdown-menu .tt-suggestion.tt-cursor { text-decoration: none; outline: 0; background-color: #f5f5f5; color: #262626; } .tt-dropdown-menu .tt-suggestion.tt-cursor a { color: #262626; } .tt-dropdown-menu .tt-suggestion p { margin: 0; }
这对我有效。 您可能需要使用顶部和左侧数字才能正确使用。
$('#typeahead').typeahead(...); $(".tt-hint").css('top','3px'); $(".tt-hint").css('left','1px');
根据安德烈亚斯的答案，我敢打赌，以下使用较less：
.tt-hint { .form-control; }
我想到的解决scheme是简单地将另一个CSS类（from-group-lg）添加到我的form-group元素中。
我的HTML：
<div class="form-group form-group-lg"> <label class="control-label" for="my-large-typeahead">Type to automcoplete:</label> <input type="text" class="form-control typeahead" id="my-large-typeahead"> </div>
在我的scss文件中我添加了：
.form-group-lg .tt-hint { @extend .input-lg; }
从Bootstrap 3.0 RC1的Typeahead问题 ：如[laurent-wartel] [2]提到的，尝试https://github.com/hyspace/typeahead.js-bootstrap3.less或https://github.com/bassjobsen/Bootstrap- 3-Typeahead额外的CSS使用typeahead.js与Bootstrap 3.1.0。
或者使用新的Bloodhoundbuild议引擎使用“旧”（TB 2）插件： https ： //github.com/bassjobsen/Bootstrap-3-Typeahead/issues/26
更清洁的less解决scheme
.tt-small { .twitter-typeahead { display: block !important; // Note: Override inline styles set by JavaScript &> .tt-hint { &:extend(.form-control); color: @medium-gray; } } }
标记如下所示：
<div class="form-group"> <label class="col-lg-3 col-sm-3 control-label" for="mydropdown">Dropdown</label> <div class="col-lg-6 col-sm-6 tt-mydropdown tt-small"> <input class="form-control" id="mydropdown" placeholder="Dropdown" type="text"> </div> <!-- tt-small end --> </div>
另一种使Twitter Typeahead与Bootstrap 3一起工作的方法。
// Using jQuery, we remove the inline styles compulsively added by Twitter Typeahead. // We need to do this because, if not, styles on our stylesheets won't be able to // override those inline styles. $('.twitter-typeahead, .typeahead').attr('style','');
然后，在你的LESS样式表中，你可以添加以下内容：
// Twitter Typeahead .twitter-typeahead { position: relative; .tt-hint { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: @input-bg; border: none; } .tt-input { position: relative; vertical-align: top; } .tt-hint + .tt-input { background-color: transparent; } .tt-dropdown-menu { &:extend(.dropdown-menu all); } .tt-suggestion { &:extend(.dropdown-menu > li > a all); p { margin-bottom: 0; } } .tt-cursor { &:extend(.dropdown-menu > .active > a all); } }
没有必要去通过任何这些复杂的实现，只需添加
style="position: relative"
到父元素。 它使用绝对定位，它只需要知道你指的是什么“绝对”。
