Twitter上的CSS问题使用Bootstrap 3 [英] CSS issue on Twitter Typeahead with Bootstrap 3
问题描述
随着Bootstrap 3.的发布，已删除了Typeahead。
），如文档中所述，但没有运气。
任何帮助或建议将不胜感激。
jsfiddle显示问题：
http：// jsfiddle。 net / KrtB5 /
HTML
code>< body>
< div class =container>
< label>州< / label> < input type =textclass =typeahead form-control/>
< / div>
< / body>
Javascript ：
$（'。typeahead'）。typeahead（{
name：'some name'，
local：['test'，'abc' def']
}）
EDIT：Updated for Bootstrap 3.0
编辑2：修改了字体大小调用。请参阅new jsfiddle
在使用样式玩过后，它看起来像窗体控件类与tt提示不太一致。所以我确保边距和边框排列。采用Hieu Nguyen的回答并添加border-radius并支持input-small / input-large
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-small / input-large的脚本
$（'。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/
With the release of Bootstrap 3. Typeahead has been removed in favor of this:
https://github.com/twitter/typeahead.js
Ive integrated it successfully on remote fetching of data
but Im having problem with the autocompletion
as you can see there are two text appearing on the textbox.
I've included the css (https://github.com/jharding/typeahead.js-bootstrap.css) as said in the documentation but no luck.
any help or suggestion would be appreciated.
jsfiddle showing the issue:
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']
})
EDIT: Updated for Bootstrap 3.0 EDIT 2: Typeahead call was modified. See new jsfiddle
After playing around with the styling it looks like the form-control class doesn't quite line-up with the tt-hint. So I made sure the margins and borders line up. Taking Hieu Nguyen's answer and adding border-radius and support for input-small/input-large
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;
}
Script for input-small/input-large
$('.typeahead.input-sm').siblings('input.tt-hint').addClass('hint-small');
$('.typeahead.input-lg').siblings('input.tt-hint').addClass('hint-large');
Updated jsfiddle: http://jsfiddle.net/KrtB5/542/
这篇关于Twitter上的CSS问题使用Bootstrap 3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
