我正在开发一个使用 Bootstrap 3 的应用程序。我有一个当前定义如下的下拉列表:
<select id="options" class="form-control">
<option>Go home</option>
<option>Go Left</option>
<option>Go Up</option>
<option>Go Right</option>
<option>Go Down</option>
</select>
我喜欢下拉列表的行为,因为当您选择一个选项时,它的文本就会显示出来。我也喜欢这样一个事实,即下拉菜单会延伸以填充可用空间。但是,我想要 Bootstrap's button drop downs 的分隔线提供。为了两全其美,我尝试了以下方法:
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Go Home... <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Go Home</a></li>
<li class="divider"></li>
<li><a href="#">Go Left</a></li>
<li><a href="#">Go Up</a></li>
<li><a href="#">Go Right</a></li>
<li><a href="#">Go Down</a></li>
</ul>
</div>
当我选择一个选项时,文本并没有得到更新。此外,下拉菜单不会拉伸(stretch)以填充可用空间。
最佳答案
您可以使用 btn-block
类来设置按钮和下拉菜单的填充宽度..
<div class="btn-group btn-block">
<button type="button" class="btn btn-block btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Go Home... <span class="caret"></span>
</button>
<ul class="dropdown-menu btn-block" role="menu">
<li><a href="#">Go Home</a></li>
<li class="divider"></li>
<li><a href="#">Go Left</a></li>
<li><a href="#">Go Up</a></li>
<li><a href="#">Go Right</a></li>
<li><a href="#">Go Down</a></li>
</ul>
</div>
让下拉列表像选择控件一样工作的唯一方法是像这样使用 JavaScript 和/或 jQuery..
$(".dropdown-menu li a").click(function(){
var selText = $(this).text();
$(this).parents('.btn-group').find('.dropdown-toggle').html(selText+' <span class="caret"></span>');
});
关于css - 在 Bootstrap 中使用按钮模拟选择行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29866066/