如何调整Django表单的布局，实现表单元素整齐对齐？

解决方案 #

你遇到的布局问题可以从表单定义、模板渲染两个维度调整，以下是可直接复用的优化方案：

1. 调整表单字段的组件参数 #

你当前的body字段Textarea组件设置的rows=1、cols=10过小，是导致正文输入区域布局异常的核心原因，先修改表单定义：

class EditForm(forms.Form):
    title = forms.CharField(label="条目标题")
    body = forms.CharField(
        label="条目正文", 
        widget=forms.Textarea(
            attrs={
                'rows': 25,  # 适配正文编辑的高度
                'cols': 90,  # 适配常规页面宽度
                'class': 'form-control'  # 预留样式类，方便后续加CSS
            }
        )
    )

2. 模板层手动控制表单布局 #

不要直接用{{ form.as_p }}这类默认渲染方法，手动逐个渲染字段可以完全控制布局结构，模板示例如下：

<form method="post">
    {% csrf_token %}
    <div class="form-group">
        <label for="{{ form.title.id_for_label }}">{{ form.title.label }}</label>
        {{ form.title }}
        {% if form.title.errors %}
            <div class="text-danger">{{ form.title.errors }}</div>
        {% endif %}
    </div>
    <div class="form-group mt-3">
        <label for="{{ form.body.id_for_label }}">{{ form.body.label }}</label>
        {{ form.body }}
        {% if form.body.errors %}
            <div class="text-danger">{{ form.body.errors }}</div>
        {% endif %}
    </div>
    <button type="submit" class="btn btn-primary mt-3">提交修改</button>
</form>

<!-- 可加简易CSS优化显示效果 -->
<style>
input, textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
}
textarea {
    resize: vertical; /* 允许用户手动调整输入框高度 */
}
</style>

3. 可选优化 #

如果需要更贴近维基百科的编辑体验，可以给正文输入框集成Markdown编辑器组件，只需要在Textarea的attrs中增加对应编辑器的触发类名即可。

内容的提问来源于stack exchange，提问作者prison-mike