Symfony项目中Bootstrap表格内修改与删除提交按钮对齐问题

这问题很常见，主要是因为删除操作的表单默认是块级元素，会独占一行，导致修改按钮在上、删除按钮被迫换行到下方。咱们用Bootstrap的内置布局类就能轻松搞定，给你两种常用方案：

方案1：Flex布局（推荐，灵活可控） #

用d-flex容器把两个按钮（包括表单里的删除按钮）包裹起来，再用gap-*类控制间距，同时给表单加d-inline让它变成行内块元素，避免独占一行：

<td>
    <div class="d-flex gap-2">
        <!-- 修改按钮 -->
        <a href="{{ path('entity_edit', {'id': entity.id}) }}" class="btn btn-primary">
            修改
        </a>
        <!-- 删除表单 -->
        <form action="{{ path('entity_delete', {'id': entity.id}) }}" method="post" class="d-inline">
            <input type="hidden" name="_token" value="{{ csrf_token('delete' ~ entity.id) }}">
            <button type="submit" class="btn btn-danger">
                删除
            </button>
        </form>
    </div>
</td>

• d-flex：让容器内的元素横向排列
• gap-2：给按钮之间添加合适的间距（可换成gap-1/gap-3调整大小）
• d-inline：把表单从默认的块级改成行内块，消除换行问题

方案2：按钮组（紧凑布局） #

如果想要按钮紧挨着的紧凑效果，可以用Bootstrap的btn-group组件：

<td>
    <div class="btn-group" role="group">
        <a href="{{ path('entity_edit', {'id': entity.id}) }}" class="btn btn-primary">
            修改
        </a>
        <form action="{{ path('entity_delete', {'id': entity.id}) }}" method="post" class="d-inline">
            <input type="hidden" name="_token" value="{{ csrf_token('delete' ~ entity.id) }}">
            <button type="submit" class="btn btn-danger">
                删除
            </button>
        </form>
    </div>
</td>

btn-group会自动让内部的按钮无缝衔接，视觉上更像一个整体，适合需要紧凑操作栏的场景。

额外提示 #

确保两个按钮用了相同的尺寸类（比如都是默认的btn，或者都加btn-sm/btn-lg），这样高度一致，对齐效果更完美。

内容的提问来源于stack exchange，提问作者Sam