Question

我试图将以下Bootstrap按钮放在同一水平线上：

<a class="btn btn-success btn-lg checkout" href="/foo/buy">
  <i class="glyphicon glyphicon-shopping-cart"></i> $50.00
</a>

<form action="/subscriptions" accept-charset="UTF-8" method="post">
  <div class="btn-group">
    <button class="btn btn-default btn-lg" type="submit">
      <i class="glyphicon glyphicon-eye-open"></i> Watch
    </button>
    <a class="btn btn-default btn-lg" href="/foo/watchers">
      <span>1</span>
    </a>
  </div>
</form>

<form action="/wishlists" accept-charset="UTF-8" method="post">
  <div class="btn-group">
    <button class="btn btn-default btn-lg" type="submit">
      <i class="glyphicon glyphicon-gift"></i> Add to wishlist
    </button>
    <a class="btn btn-default btn-lg" href="/foo/wishlists">
      <span>1</span>
    </a>
  </div>
</form>

Here's a JSFiddle of it.

我尝试使用.form-horizontal和.form-inline类进行添加（虽然我怀疑这些是用于表单内部样式），以及正在执行display: inline，但可以＆＃ 39;似乎让它发挥作用（我对CSS不好）。

Answer 1

添加

style="float:left; width: auto"

到表单选择器

如何以单独的形式内联（水平对齐）制作Bootstrap按钮？

1 个答案: