转载

输入框组带有下拉菜单的按钮

在输入框组中添加带有下拉菜单的按钮，只需要简单地在一个 .input-group-btn class 中包裹按钮和下拉菜单即可。

如下面的实例所示：

作为额外元素的按钮式下拉菜单

 <div class="row">   <div class="col-lg-6">     <div class="input-group">       <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" role="menu">           <li><a href="#">按钮式下拉菜单</a></li>           <li><a href="#">输入框组带有下拉菜单的按钮</a></li>           <li><a href="#">输入框组带有下拉菜单的按钮</a></li>           <li class="divider"></li>           <li><a href="#">被分隔的按钮</a></li>         </ul>       </div><!-- /btn-group -->       <input type="text" class="form-control">     </div><!-- /input-group -->   </div><!-- /.col-lg-6 -->   <div class="col-lg-6">     <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 class="dropdown-menu dropdown-menu-right" role="menu">           <li><a href="#">按钮式下拉菜单</a></li>           <li><a href="#">输入框组带有下拉菜单的按钮</a></li>           <li><a href="#">输入框组带有下拉菜单的按钮</a></li>           <li class="divider"></li>           <li><a href="#">被分隔的按钮</a></li>         </ul>       </div><!-- /btn-group -->     </div><!-- /input-group -->   </div><!-- /.col-lg-6 --> </div><!-- /.row -->