在按钮组内的按钮中使用表单 - Bootstrap和Flask

Question

我正在使用Flask，SQLAlchemy和Bootstrap构建一个小型Web应用程序。用户的一个选项是更改/删除数据库中的行，该行显示在表中。我让删除部分在单个按钮中使用表单，但当按钮位于按钮组内时，我不知道该怎么做。

如果我这样做：

<div class="btn-group btn-group-sm">
    <button class="btn btn-warning">change</button>
    <form action="{{ url_for('del_component') }}" method=post class=del-component>
        <button class="btn btn-danger">
            <input type=hidden value="{{ component.id }}" name=component_to_delete>delete</input>
        </button>                            
    </form>
</div>

删除按钮有效，但它不再出现在群组中：

所以我尝试了这个：

<div class="btn-group btn-group-sm">
    <button class="btn btn-warning">change</button>
    <button class="btn btn-danger">
        <form action="{{ url_for('del_component') }}" method=post class=del-component>
            <input type=hidden value="{{ component.id }}" name=component_to_delete>delete</input>
        </form>
    </button>                            
</div>

现在按钮组看起来不错，但点击删除按钮将无法执行任何操作。

我认为这是一个简单的解决方案，但它让我难过。任何帮助将不胜感激。