html - 如何使用 css bootstrap 创建按钮组？

Question

我正在尝试用 css bootstrap 创建一个按钮组框架。

我能够毫无问题地创建按钮组。但是，我的一个按钮应该用一个表单包裹起来，以便在单击它时执行发布请求。

这是我的代码

<div class="btn-group btn-group-xs pull-right" role="group">

    <a href="/salecategories" class="btn btn-primary" title="Show all salecategories">
        <span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>
    </a>

    <a href="/salecategories/2/edit" class="btn btn-primary" title="Edit SaleCategory">
        <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
    </a>

    <form method="POST" action="/salecategories/salecategory/2" accept-charset="UTF-8" style="display: inline;" novalidate="novalidate">
    <input name="_method" value="DELETE" type="hidden">
    <input name="_token" value="8123RX6LbCpxo7LDdp3eettEXGzdfbS9gvzjbbWP" type="hidden">
        <button type="submit" class="btn btn-danger btn-xs" title="Delete SaleCategory" onclick="return confirm(&quot;Confirm delete?&quot;)" id="sometest">
            <span class="glyphicon glyphicon-trash" aria-hidden="true" title="Delete SaleCategory"></span>
        </button>
    </form>

</div>

上面的代码有效，但“红色按钮”与下面屏幕截图中的其余部分不对齐。

如何将“红色”按钮与其他两个按钮对齐？

这是一个jsfiddler允许您修改代码。请注意， fiddler 显示按钮现在已连接，但屏幕截图显示未对齐，因为我为我的应用使用了不同的字体。

Answer 1

您可以将整个按钮组包裹在表单中。这样您就可以将三个按钮并排放置在一起。

<form action="/salecategories/salecategory/2">

    <div class="btn-group btn-group-xs" role="group">
        <a href="/salecategories" class="btn btn-primary">Show all</a>
        <a href="/salecategories/2/edit" class="btn btn-primary">Edit</a>
        <button type="submit" class="btn btn-primary">Delete</button>
    </div>

</form>