我有这个:
这是代码
<div class="col-xs-8 col-xs-offset-2">
<form role="form">
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul id="color-dropdown-menu" class="dropdown-menu dropdown-menu-right" role="menu">
<li class="input"><a href="#">black</a></li>
<li class="input"><a href="#">white</a></li>
<li class="input"><a href="#">red</a></li>
<li class="input"><a href="#">blue</a></li>
<li class="input"><a href="#">yellow</a></li>
</ul>
</div>
</div>
</form>
</div>
小提琴:http://jsfiddle.net/ytqyowgt/
如何使下拉列表与输入字段+按钮一样宽?
答案 0 :(得分:6)
答案 1 :(得分:0)
改变HTML的结构:
<div class="col-xs-8 col-xs-offset-2">
<form role="form">
<div class="input-group">
<div class="input-group-btn">
<input type="text" class="form-control">
<ul id="color-dropdown-menu" class="dropdown-menu dropdown-menu-right" role="menu">
<li class="input"><a href="#">black</a></li>
<li class="input"><a href="#">white</a></li>
<li class="input"><a href="#">red</a></li>
<li class="input"><a href="#">blue</a></li>
<li class="input"><a href="#">yellow</a></li>
</ul>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
</div>
</div>
</form>
</div>
和CSS:
.input-group-btn ul {
width:100%;
}
唯一的问题是你松开按钮上的圆角。