如何在Python Django中实现多个分属不同表单的提交按钮同行显示且功能正常？

我明白你的困扰——要让分属不同表单的按钮（保存、完成/取消完成、删除）同行显示，还要保证每个按钮的功能正常，确实需要绕开HTML表单不能嵌套的限制，同时利用好Bootstrap的布局工具。下面给你一个完美的解决方案，既满足布局需求，又完全保留原有功能：

修改后的完整代码 #

{% extends 'BJJApp/base.html' %}

{% block content %}

<div class="row justify-content-center mt-5">
    <div class="col-md-5">
        <h2>Edit Item</h2> <!-- 这里改成了Edit Item，更符合更新表单的语义，若为新建页面可改回New Item -->
    </div>
</div>

<div class="row justify-content-center mt-5">
   <div class="col-md-5">
        {% if error %}
        <div class="alert alert-danger" role="alert">
            {{ error }}
        </div>
        {% endif %}

        <div class="container">
            <!-- 主表单：仅包含输入字段，不包含提交按钮 -->
            <form method="POST" id="main-item-form">
                {% csrf_token %}
                <div class="form-group">
                    <label for="title">Title</label>
                    <input type="text" name="title" class="form-control" id="title" value="{{ item.title }}" required>
                </div>
            <div class="form-group">
                <label for="memo">Memo</label>
                <textarea name="memo" rows="5" class="form-control" id="memo">{{ item.memo }}</textarea>
            </div>
            <div class="form-group form-check">
                <input type="checkbox" name="important" class="form-check-input" id="important" {% if item.important %}checked{% endif %}>
                <label class="form-check-label" for="important">Important</label>
            </div>
        </form>

        <!-- 按钮容器：所有按钮统一放在这里，用Bootstrap Flex实现同行排列 -->
        <div class="d-flex gap-2 mt-3">
            <!-- 保存按钮：通过HTML5 form属性关联主表单，正常提交输入数据 -->
            <button type="submit" form="main-item-form" class="btn btn-primary">Save</button>

            <!-- 完成按钮表单 -->
            {% if item.datecompleted is None %}
            <form method="POST" action="{% url 'completeitem' item.id %}" class="m-0">
                {% csrf_token %}
                <button type="submit" class="btn btn-success">Complete</button>
            </form>
            {% endif %}

            <!-- 取消完成按钮表单 -->
            {% if item.datecompleted %}
            <form method="POST" action="{% url 'uncompleteitem' item.id %}" class="m-0">
                {% csrf_token %}
                <button type="submit" class="btn btn-success">UnComplete</button>
            </form>
            {% endif %}

            <!-- 删除按钮表单 -->
            <form method="POST" action="{% url 'deleteitem' item.id %}" class="m-0">
                {% csrf_token %}
                <button type="submit" class="btn btn-danger">Delete</button>
            </form>
        </div>
    </div>
    </div>
</div>
<br><br>

{% endblock %}

关键改动说明 #

1. 拆分主表单与提交按钮
   主表单只保留输入字段，把原来的Save按钮移到表单外面，通过HTML5的form属性（form="main-item-form"）关联主表单。这样既避免了HTML表单不能嵌套的限制，又能让Save按钮正常提交主表单的所有数据。

2. 用Bootstrap Flex实现按钮同行
   用<div class="d-flex gap-2 mt-3">包裹所有按钮/按钮表单：

   • d-flex：让内部元素自动横向排列
   • gap-2：给按钮之间添加均匀的间距（替代原来的inline-block自定义样式）
   • mt-3：给按钮容器添加上边距，和输入区域拉开合适距离

3. 优化按钮表单样式
   给每个功能按钮的表单添加class="m-0"，去掉表单默认的margin，避免按钮排列出现多余的空隙。

功能验证 #

• Save按钮：点击后正常提交主表单的title、memo、important字段，完全保留原有保存功能
• Complete/UnComplete按钮：各自提交到对应的Django视图，正常完成状态切换
• Delete按钮：正常提交删除请求，功能不受影响

这样调整后，所有按钮会整齐地横向排列，同时每个按钮的功能和原来完全一致，不会出现任何功能失效的问题~

备注：内容来源于stack exchange，提问作者Ystan