Here is my jsfiddle用于 Bootstrap css 下拉菜单
目前,当我点击右侧的箭头按钮时,它会打开菜单项。
我想要删除的按钮和元素应该在用户单击编辑框(选择类别..)时出现。
菜单应覆盖编辑框的整个宽度。
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Select category ...">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span></button>
<ul class="dropdown-menu pull-right">
<li><a href="#">Sports</a></li>
<li><a href="#">Entertainment</a></li>
<li><a href="#">Politics</a></li>
<li class="divider">Technolohy</li>
<li><a href="#"></a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
当用户将光标放在文本框上时,它应该显示覆盖文本框整个宽度的菜单项
更新
最佳答案
只需将它添加到您的 CSS 中,您就可以使用 full-width-dropdown-menu
.... :)
.dropdown-menu {
width: 100%;
}
编辑
请检查 jsfiddle 中包含的文件....有一个typehead.js
,您肯定需要它!!
demo after which i am your new best friend :)
你需要的JS
$('.typehead').typeahead({
name: 'Some name',
local: ['Sports', 'Entertainment', 'Politics', 'Technolohy', 'Technolohy Again']
})
$('.typeahead.input-sm').siblings('input.tt-hint').addClass('hint-small');
$('.typeahead.input-lg').siblings('input.tt-hint').addClass('hint-large');
HTML
<div class="container">
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="typehead form-control" placeholder="Select category ..." />
</div>
</div>
<!-- /.col-lg-6 -->
</div>
<!-- /.row -->
<!-- /.row -->
关于html - 更改 bootstrap css 下拉框的预览,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20901839/