javascript - 在 Twitter Bootstrap 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>

这是 Bootstrap 中的漏洞还是我可以使用的修复程序？

Answer 1

在 bs3 中，您只能将这两个类用于输入组:

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 -->