Twitter bootstrap Jquery ui自动完成和引导3固定导航栏

我正在尝试使用jqueryui和twitterbootstarp进行自动完成搜索。我在导航栏上添加了一个facny搜索框，一切看起来都很好。请查看下面的代码片段，或者您也可以在此处看到相同的代码，只需键入“a”，它将自动在下拉列表中显示结果

问题在于平板电脑和手机版本的引导导航栏，例如下面的代码片段默认显示平板电脑版本，所以bootstarp导航栏会调整其高度，但当我在平板电脑或手机版本上搜索时，自动完成结果会停留在导航栏后面，导航栏是固定位置。我曾试图通过z-index和更改

.ui autocomplete{position:relative；}

来解决这个问题，但没有任何效果。下面是这个问题的图片

请查看下面的代码片段，谢谢

$（函数（）{
//如果用户重置表单或点击Escape，请删除搜索！
$（'body，.navbar折叠表单[role=“search”]按钮[type=“reset”]”）。在（'click keyup'，函数（事件）{
console.log（event.currentTarget）；
if（event.which==27&&$（'.navbar折叠形式[role=“search”]'）.hasClass（'active'））||
$（event.currentTarget.attr（'type'）=='reset'）{
closeSearch（）；
}
});
函数closeSearch（）{
var$form=$（'.navbar折叠表单[role=“search”].active'）
$form.find（'input'）.val（''）；
$form.removeClass（'active'）；
}
//如果表单未处于活动状态，则显示搜索//event.preventDefault（）很重要，这会阻止表单提交
$（文档）。在（'单击'，'）。导航栏折叠表单[role=“search”]：非（.active）按钮[type=“submit”]”，函数（事件）{
event.preventDefault（）；
var$form=$（this）.closest（'form'），
$input=$form.find（'input'）；
$form.addClass（'active'）；
$input.focus（）；
});
});
$（函数（）{
var availableTags=[
“动作脚本”，
“AppleScript”，
“Asp”，
“基本”，
“C”，
“C++”，
“Clojure”，
“COBOL”，
“ColdFusion”，
“二郎”，
“Fortran”，
“好极了”，
“哈斯克尔”，
“爪哇”，
“JavaScript”，
“口齿不清”，
“Perl”，
“PHP”，
“Python”，
“红宝石”，
“斯卡拉”，
“方案”
];
$（“#搜索”）.autocomplete({
资料来源：availableTags
});
});
正文{
填充：60px 0px；
}
.导航栏倒塌{
位置：相对位置；
填充顶部：30px！重要；
最大高度：270px；
}
.navbar折叠表单[role=“search”]{
位置：绝对位置；
顶部：0px；
右：0px；
宽度：100%；
填充：0px；
边际：0px；
z指数：0；
}
.navbar折叠表单[role=“search”]按钮，
.navbar折叠表单[role=“search”]输入{
填充：8px 12px；
边界半径：0px；
边框宽度：0px；
颜色：rgb（119、119、119）；
背景色：rgb（248248248248）；
边框颜色：rgb（231231231）；
盒影：无；
大纲：无；
}
.navbar折叠表单[role=“search”]输入{
填充：16px 12px；
字号：14pt；
字体：斜体；
颜色：rgb（160160160）；
盒影：无；
}
.navbar折叠表单[role=“search”]按钮[type=“reset”]{
显示：无；
}
@介质（最小宽度：768px）{
.导航栏倒塌{
填充顶部：0px！重要；
右边填充：38px！重要；
}
.navbar折叠表单[role=“search”]{
宽度：38px；
}
.navbar折叠表单[role=“search”]按钮，
.navbar折叠表单[role=“search”]输入{
填充：15px 12px；
}
.navbar折叠表单[role=“search”]输入{
字号：18pt；
不透明度：0；
显示：无；
高度：50px；
}
.navbar折叠表单[role=“search”]。活动{
宽度：100%；
}
.navbar折叠表单[role=“search”]。活动按钮，
.navbar折叠表单[role=“search”]。活动输入{
显示：表格单元格；
不透明度：1；
}
.navbar折叠表单[role=“search”]。活动输入{
宽度：100%；
}
}
.ui自动完成{
z指数：1000；
最大高度：500px；
溢出y：自动；
溢出x：隐藏；
位置：相对位置；
宽度：500px；
}
*ui自动完成{
高度：500px；
z指数：1000；
宽度：500px；
}
.隐藏{
显示：无；
}























接近
搜寻
将
.ui autocomplete
的
z索引设置为
2000

你是正确的
.ui-autocomplete { z-index:2000 !important; }