css - 对齐 Bootstrap touchSpin 的各种元素

Question

我想让我的 bootstrap touchSpin 的元素像演示中那样对齐 (http://www.virtuosoft.eu/code/bootstrap-touchspin)。

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

在我的例子中，减号按钮、加号按钮和文本框没有很好地对齐。

为了明确说明我的问题，我在 http://www.finapp.biz/testabcd/ 上上传了一个演示

你知道我该如何解决这个问题吗？

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

非常感谢您的帮助。

Answer 1

您需要使用一个名为 Button addons 的 Bootstrap 组件，您可以阅读更多关于它们的信息 here在官方 Bootsrap 页面上。 我会留给您一个看起来像您要查找的元素的代码片段。

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