如何对齐Wagtail电子邮件表单上的字段

在Wagtail中，电子邮件表单字段的对齐可以通过多种方式实现，这主要取决于你希望采用的设计和布局。以下是一些基本的方法来对齐Wagtail电子邮件表单上的字段：

基础概念

CSS Flexbox：一种用于创建灵活布局的CSS模块。
CSS Grid：一种二维布局系统，允许更复杂的网页布局。
Bootstrap：一个流行的前端框架，提供了预定义的类来帮助快速布局。

类型与应用场景

Flexbox：适用于需要灵活对齐和分布空间的场景。
CSS Grid：适用于更复杂的二维布局需求。
Bootstrap：适用于需要快速开发和响应式设计的场景。

示例代码

以下是一个使用Bootstrap来对齐Wagtail电子邮件表单字段的示例：

{% load wagtailcore_tags %}

<form action="{% pageurl page %}" method="POST">
    {% csrf_token %}
    <div class="form-group row">
        <label for="{{ form.email.id_for_label }}" class="col-sm-2 col-form-label">Email</label>
        <div class="col-sm-10">
            {{ form.email|add_class:"form-control" }}
        </div>
    </div>
    <div class="form-group row">
        <label for="{{ form.subject.id_for_label }}" class="col-sm-2 col-form-label">Subject</label>
        <div class="col-sm-10">
            {{ form.subject|add_class:"form-control" }}
        </div>
    </div>
    <div class="form-group row">
        <label for="{{ form.message.id_for_label }}" class="col-sm-2 col-form-label">Message</label>
        <div class="col-sm-10">
            {{ form.message|add_class:"form-control" }}
        </div>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>