lg vs sm在bootstrap的输入组中

Question

我无法完成以下工作：

<div class="input-group-sm">
                        <input type="text" class="form-control">
                        <div class="input-group-sm">
                            <button class="btn btn-default btn-sm" type="button">
                                <i class="glyphicon glyphicon-remove"></i>
                            </button>
                            <button class="btn btn-default btn-sm" type="button">
                                <i class="glyphicon glyphicon-search"></i>
                            </button>
                        </div>
                    </div>

我希望文本框和两个按钮位于同一条线上，彼此相连。上面的代码使按钮位于第二行。任何人都可以帮助我。

如果将“sm”替换为“lg”，它的效果会很好。

Answer 1

DEMO：http://jsbin.com/OjahitE/1

http://jsbin.com/OjahitE/1/edit

<div class="input-group input-group-sm">
 <input type="text" class="form-control">
 <div class="input-group-btn">
 <button class="btn btn-default" type="button"> 
  icon here
 </button>
<button class="btn btn-default" type="button"> 
  icon here
 </button>
</div>
</div>

正在添加更多支持，请参阅pull-request：https://github.com/twbs/bootstrap/pull/11910

Answer 2

试试这个..

  <div class="input-group input-group-sm">
    <input type="text" class="form-control">
    <span class="input-group-addon"><i class="glyphicon glyphicon-remove"></i></span>
    <span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span>
  </div>

Bootply：http://bootply.com/101146