我必须在twitter bootstrap中添加一个input-group-btn,并附带一个下拉菜单,但下面的输出图像显示btn-group与输入组的大小不一样.
这是HTML代码：
<div class="row">
<div class="col-md-2"><button type="button" class="btn btn-primary" onclick="showModalAddStation();">Add Station</button></div>
<div class="col-md-4">
<div class="form-group">
<div class="input-group">
<div class="input-group-btn" >
<div class="btn-group">
<button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
<span data-bind="label" id="searchLabel">Search By</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</div>
<input type="search" name="searchBy" id="searchBy" class="form-control" />
<span class="input-group-btn">
<button id="filter" class="btn btn-primary btn-block glyphicon glyphicon-plus" onclick="searchStationTable();"></button>
</span>
</div>
</div>
</div>
解决方法
你的问题是：
>下拉菜单的按钮有btn-sm类,它将减小按钮http://getbootstrap.com/components/#btn-dropdowns-sizing的大小
解决方案：删除btn-sm类
>您正在按钮上使用glyphicon.
解决方案：如果使用glyphicon http://getbootstrap.com/components/#glyphicons-how-to-use,您可以使用span,i标签或其他按钮
<div class="row">
<div class="col-md-2"><button type="button" class="btn btn-primary" onclick="showModalAddStation();">Add Station</button></div>
<div class="col-md-4">
<div class="form-group">
<div class="input-group">
<div class="input-group-btn" >
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
<span data-bind="label" id="searchLabel">Search By</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</div>
<input type="search" name="searchBy" id="searchBy" class="form-control" />
<span class="input-group-btn">
<button id="filter" class="btn btn-primary btn-block" onclick="searchStationTable();">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
</div>
</div>
</div>
