对齐bootstrap touchSpin的各种元素

Question

我希望我的bootstrap touchSpin的元素与demo（http://www.virtuosoft.eu/code/bootstrap-touchspin）中的一致。

正如您在下面的示例中所看到的，这两个按钮与文本框垂直对齐。

在我的情况下，减号按钮，加号按钮和文本框没有很好地对齐。

为了明确地显示我的问题，我在http://www.finapp.biz/testabcd/

上传了一个演示

您对我如何解决这个问题有任何想法吗？

我希望我的问题是可以理解的。

非常感谢你的帮助。

Answer 1

您需要使用名为Button addons的引导程序组件，您可以在官方Bootsrap页面上阅读有关它们here的更多信息。 我会留下一个代码片段，看起来就像您要查找的内容。

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">L</button>
      </span>
      <input type="text" class="form-control" placeholder="Search for...">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">R</button>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <!-- /.col-lg-6 -->
</div><!-- /.row -->