如何在crispy-form (Django)的InlineCheckboxes中添加行之间的空格和对齐同一列中的元素？

在 Django 的 crispy-forms 中，InlineCheckboxes 是一个用于显示内联复选框的表单小部件。如果你想在行之间添加空格并对齐同一列中的元素，可以通过自定义模板和 CSS 来实现。

基础概念

InlineCheckboxes 是 crispy-forms 提供的一个小部件，用于将复选框显示在同一行中。默认情况下，这些复选框会紧密排列，没有额外的空格。

类型与应用场景

类型：内联复选框通常用于选项较多且用户需要快速选择的场景。
应用场景：例如，在设置页面中选择多个功能开关，或者在表单中选择多个兴趣爱好。

解决方法

自定义模板

首先，你可以创建一个自定义模板来调整复选框的布局。在项目的 templates 目录下创建一个文件，例如 inline_checkboxes.html：

{% load crispy_forms_tags %}

<div class="inline-checkboxes">
    {% for checkbox in field %}
        <div class="checkbox-container">
            {{ checkbox }}
        </div>
    {% endfor %}
</div>

自定义 CSS

接下来，添加一些 CSS 样式来增加行之间的空格并对齐元素：

.inline-checkboxes {
    display: flex;
    flex-wrap: wrap;
}

.checkbox-container {
    margin-right: 10px; /* 调整复选框之间的间距 */
    margin-bottom: 10px; /* 调整行之间的间距 */
}

.checkbox-container label {
    display: inline-block;
    width: 100px; /* 固定标签宽度以对齐 */
}

在表单中使用自定义模板

在你的 Django 表单中，指定使用自定义模板：

from django import forms
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Field

class MyForm(forms.Form):
    choices = forms.MultipleChoiceField(
        choices=[('option1', 'Option 1'), ('option2', 'Option 2'), ('option3', 'Option 3')],
        widget=forms.CheckboxSelectMultiple,
        label='Select Options'
    )

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.helper = FormHelper()
        self.helper.layout = Layout(
            Field('choices', template='inline_checkboxes.html')
        )

示例代码

假设你有一个简单的 Django 应用，以下是如何集成上述解决方案的完整示例：

models.py

from django.db import models

class MyModel(models.Model):
    choices = models.CharField(max_length=100)

forms.py

from django import forms
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Field
from .models import MyModel

class MyForm(forms.ModelForm):
    class Meta:
        model = MyModel
        fields = ['choices']

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.helper = FormHelper()
        self.helper.layout = Layout(
            Field('choices', template='inline_checkboxes.html')
        )

views.py

from django.shortcuts import render
from .forms import MyForm

def my_view(request):
    if request.method == 'POST':
        form = MyForm(request.POST)
        if form.is_valid():
            form.save()
    else:
        form = MyForm()
    return render(request, 'my_template.html', {'form': form})

my_template.html

{% load crispy_forms_tags %}
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="{% static 'css/my_styles.css' %}">
</head>
<body>
    <form method="post">
        {% csrf_token %}
        {{ form|crispy }}
        <button type="submit">Submit</button>
    </form>
</body>
</html>

static/css/my_styles.css

.inline-checkboxes {
    display: flex;
    flex-wrap: wrap;
}

.checkbox-container {
    margin-right: 10px;
    margin-bottom: 10px;
}

.checkbox-container label {
    display: inline-block;
    width: 100px;
}

通过上述步骤，你可以在 InlineCheckboxes 中添加行之间的空格并对齐同一列中的元素。