使用 Bootstrap 3 在 Twitter Typeahead 上的 CSS 问题 [英] CSS issue on Twitter Typeahead with Bootstrap 3
问题描述
随着 Bootstrap 3 的发布.Typeahead 已被删除以支持此:
) 如文档中所述，但没有运气.
任何帮助或建议将不胜感激.
jsfiddle 显示问题:
http://jsfiddle.net/KrtB5/
HTML
<div class="容器"><label>State</label><input type="text" class="typeahead form-control"/>Javascript:
$('.typeahead').typeahead({name: '一些名字',本地:['测试'，'abc'，'def']})针对 Bootstrap 3.0 更新编辑 2:Typeahead 调用已修改.查看新的 jsfiddle
在调整样式后，看起来表单控件类与 tt-hint 不太一致.所以我确保边距和边框对齐.采取 Hieu Nguyen 的回答并添加边界半径和对输入小/输入大的支持
CSS
.twitter-typeahead .tt-hint{显示:块；高度:34px；填充:6px 12px；字体大小:14px；行高:1.428571429；边框:1px 实心透明；边框半径:4px；}.twitter-typeahead .hint-small{高度:30px；填充:5px 10px；字体大小:12px；边框半径:3px；行高:1.5；}.twitter-typeahead .hint-large{高度:45px；填充:10px 16px；字体大小:18px；边框半径:6px；行高:1.33；}输入小/输入大的脚本
$('.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/
这篇关于使用 Bootstrap 3 在 Twitter Typeahead 上的 CSS 问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
