在 Bootstrap 4 的表格单元格中对齐两个按钮（其中一个在表单中）

Question

我正在使用 Bootstrap 4，我想对齐表格列中的两个按钮。按钮大小相同，但第二个按钮位于表单内。

我尝试使用按钮组的方法几乎解决了这种情况，但不幸的是按钮之间有一个小间隙：

<td class="text-right">
    <div class="btn-group" role="group">
        <button type="button" class="btn btn-sm btn-secondary">Edit</button>
        <form action="" method="POST">
            <button type="button" class="btn btn-sm btn-danger">Delete</button>
        </form>
    </div>
</td>

我可以使用什么实用程序类或任何其他 css 以使按钮在同一级别上对齐？

附：它不一定是按钮组，它可以是任何其他技术，只要按钮在同一行。

Answer 1

按照引导程序中用于对齐列的相同策略，它的 td 可以是 row 类，被 col-md , col-lg, col-sm 类中的项目包围。

试试这个：

HTML

<td class="text-right row">
    <div class="btn-group" role="group">
        <div class="col-md-6 custom">
            <button type="button" class="btn btn-sm btn-secondary">Edit</button>        
        </div>
        <div class="col-md-6 custom">
            <form action="" method="POST">
                <button type="button" class="btn btn-sm btn-danger">Delete</button>
            </form>
        </div>
    </div>
</td>

使用自定义 CSS 自定义您的列

CSS

.custom {
    padding-right: 5px;
    padding-left: 5px;
}

https://jsfiddle.net/braulioti/aq9Laaew/160600/