如何在Django Crispy Forms中将提交按钮与表单字段同行渲染

你的核心问题在于使用helper.add_input()的方式错误——这个方法是直接修改FormHelper实例，将按钮添加到全局的inputs列表中，最终会在整个布局渲染完成后单独输出，所以即便你把它放进Row的Column里，它依然会跑到表单末尾。

修正后的代码 #

class SetForm(forms.ModelForm):
    class Meta:
        model = Set
        fields = ['exercise', 'actual_weight', 'actual_reps', 'actual_difficulty']

    helper = FormHelper()
    helper.form_method = 'POST'

    helper.layout = Layout(
        Row(
            Column('exercise', css_class='form-group col-md-12 mb-0'),
            css_class='form-row'
        ),
        Row(
            Column('actual_weight', css_class='form-group col-6 mb-0'),
            Column('actual_reps', css_class='form-group col-6 mb-0'),
        ),
        Row(
            Column('actual_difficulty', css_class='form-group col-6 mb-0'),
            Column(
                Submit('submit', 'Submit', css_class='btn-primary'),
                css_class='form-group col-6 mb-0 d-flex align-items-end'
            ),
        )
    )

关键改动说明 #

1. 直接使用Submit实例：不再调用helper.add_input()，而是将Submit对象直接作为Column的子元素，这样按钮会被纳入当前Row的布局体系中。
2. 垂直对齐优化：给按钮所在的Column添加d-flex align-items-end（Bootstrap内置类），让按钮和左侧的表单字段底部对齐，避免视觉上的错位。
3. 清理冗余类：移除按钮上的col-6类，因为外层Column已经设置了col-6，按钮只需要保留样式类即可。

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