在Twitter上编码一个*小*按钮插件引导3

Question

查看此文档：http://getbootstrap.com/components/#input-groups-buttons特别是名为“Button Addons”的章节，以了解如何编码组合搜索框和按钮，如图所示。我用的例子代码：

<div class="row"> 
    <div class="col-lg-6"> 
    <div class="input-group"> 
     <span class="input-group-btn"> 
     <button class="btn btn-default" type="button">Go!</button> 
     </span> 
     <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"> 
     <span class="input-group-btn"> 
     <button class="btn btn-default" type="button">Go!</button> 
     </span> 
    </div><!-- /input-group --> 
    </div><!-- /.col-lg-6 --> 
</div><!-- /.row --> 

现在，我想使文本框和按钮“小”（-sm）甚至超小型（-xs），但指的是源CSS和尝试各种排列我不能得到它的工作。

这里是我已经得到最接近：

<div class="col-xs-3"> 
    <form role="form" class="form-inline" action="/search_index/search/index.html"> 
    <div class="input-group input-group-sm"> 
     <input type="text" name="q" id="tipue_search_input" class="form-control"> 
     <div class="input-group-btn"> 
     <button type="button" class="btn btn-default btn-sm" 
        id="tipue_search_button" onclick="this.form.submit();"> 
        find 
     </button> 
     </div> 
    </div> 
    </form> 
</div> 

这是一个洞，引导还是有，我可以使用一个咒语？

谢谢！

Answer 1

BS3的，你只能使用这2个clases输入grups：

input-sm和input-lg他们对我的工作

。这是你如何使用它：

<div class="input-group input-sm"> 
    <span class="input-group-btn"> 
     <button class="btn btn-default" type="button">Go!</button> 
    </span> 
    <input type="text" class="form-control"> 
</div><!-- /input-group -->