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。请注意，提琴手显示按钮现已连接，但屏幕截图显示未对齐，因为我为我的应用程序使用了不同的字体。

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>

如何使用css bootstrap创建一个按钮组？

1 个答案: