自定义包含 django.forms.CheckboxInput() 的 django.forms.BooleanField() 的样式

Question

我在我的网页上添加了一个联系方式，如下所示：

我想通过以下方式设置“CC 我自己”- 复选框的样式：

1. 文字“CC 我自己”在其框中垂直居中。
2. 复选框应位于文本“CC 我自己”旁边。
3. “前进”符号应位于文本和复选框之间，但直接位于文本旁边，并且与复选框的水平距离更大（在其右侧）。

这就是我在forms.py 中定义联系表的方式：

from django import forms

class ContactForm(forms.Form):
    # * Sender
    from_email = forms.EmailField(
        required=True,
        label='Your Email',
        widget=forms.TextInput(attrs={'placeholder': 'jsmith@example.com'}))

    # * Optional CC to sender
    cc_myself = forms.BooleanField(
        required=False,
        label='CC myself',
        widget=forms.CheckboxInput(attrs={'class': 'fa fa-share'}))

    # * Subject
    subject = forms.CharField(required=True, label='Subject')

    # * Message
    message = forms.CharField(
        widget=forms.Textarea(attrs={'placeholder': 'Dear Andreas ..'}),
        required=True,
        label='Message')

然后在home.html 模板中，表单显示如下：

<form style="margin-left: auto;margin-right: 0;" method="post" action="{% url 'contact' %}">
    {% csrf_token %}

    <!-- * Neat autoformatting of the django-form via "pip install django-widget-tweaks"
    Docs: https://simpleisbetterthancomplex.com/2015/12/04/package-of-the-week-django-widget-tweaks.html -->
    {% for hidden in sendemail_form.hidden_fields %}
        {{ hidden }}
    {% endfor %}

    {% for field in sendemail_form.visible_fields %}
    <div class="form-group">
        <label for="{{ field.id_for_label }}">{{ field.label }}</label>
        {{ field|add_class:'form-control' }}
        {% for error in field.errors %}
        <span class="help-block">{{ error }}</span>
        {% endfor %}
    </div>
    {% endfor %}


    <div style="text-align:center" class="form-actions">
        <button type="submit" class="btn btn-success">
            <!-- Search icons: https://fontawesome.com/icons?s=solid (syntax: class="fa fa-name-of-icon"))
            Docs on how to implement: https://stackoverflow.com/questions/32612690/bootstrap-4-glyphicons-migration/41281304#41281304-->
            <span class="fa fa-paper-plane"></span> Send Message
        </button>

        <!-- Add horizontal space: https://stackoverflow.com/questions/31198170/want-to-add-spacing-between-buttons/31199399#31199399 -->
        &nbsp;
        <!-- Add cancel-button redirecting to "home" according to the following docs: https://simpleisbetterthancomplex.com/2015/12/04/package-of-the-week-django-widget-tweaks.html -->
        <a href="{% url 'home' %}" class="btn btn-secondary">
            <span class="fa fa-times"></span> Cancel
        </a>
    </div>

</form>

---

编辑我的项目中使用的 CSS 样式（bootstrap 4.x）：

在我所有模板周围的base.html 中，包括以下内容：

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
    integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<!-- Docs for including fontawesome: https://stackoverflow.com/a/41281304/12298276 -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

---

在尝试@Danoram 的第一个建议后编辑：

结果是这样的（唯一的修改是复选框内“前进”-符号的位置：

我想显示 help_text='决定是否应将消息转发给您。'在灰色复选框下方，就像其他字段一样。此外，与标签文本“CC 我自己”相比，复选框的高度仍然大得多。最后但并非最不重要的一点是，整个联系表格列的格式已被扭曲。尤其是后者应该是固定的，否则我不能这样实现。

Answer 1

这是我最好的尝试（保留复选框的大小）。

使用 if 检查单独呈现 cc 字段。

虽然这样做我必须从复选框输入中删除类并将它们直接放入 html 中

forms.py

cc_myself = forms.BooleanField(
        required=False,
        label='CC myself',
        widget=forms.CheckboxInput())

home.html

<form style="margin-left: auto;margin-right: 0;" method="post" action="{% url 'contact' %}">
    {% csrf_token %}

    <!-- * Neat autoformatting of the django-form via "pip install django-widget-tweaks"
        Docs: https://simpleisbetterthancomplex.com/2015/12/04/package-of-the-week-django-widget-tweaks.html -->
    {% for hidden in sendemail_form.hidden_fields %}
    {{ hidden }}
    {% endfor %}

    {% for field in sendemail_form.visible_fields %}
        {% if field.label == 'CC myself'%}
            <div class="row form-group">
                <div class="col-3 col-lg-2 col-xl-auto">
                    <label>{{ field.label }} <label for="{{ field.id_for_label }}" class="fa fa-share"></label></label>
                </div>
                <div class="col-2">
                    {{ field|add_class:'form-control' }}
                </div>
            </div>

        {% else %}
            <div class="form-group">
                <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                {{ field|add_class:'form-control' }}
                {% for error in field.errors %}
                    <span class="help-block">{{ error }}</span>
                {% endfor %}
            </div>

        {% endif %}
    {% endfor %}


    <div style="text-align:center" class="form-actions">
      <button type="submit" class="btn btn-success">
        <!-- Search icons: https://fontawesome.com/icons?s=solid (syntax: class="fa fa-name-of-icon"))
                Docs on how to implement: https://stackoverflow.com/questions/32612690/bootstrap-4-glyphicons-migration/41281304#41281304-->
        <span class="fa fa-paper-plane"></span> Send Message
      </button>

      <!-- Add horizontal space: https://stackoverflow.com/questions/31198170/want-to-add-spacing-between-buttons/31199399#31199399 -->
      &nbsp;
      <!-- Add cancel-button redirecting to "home" according to the following docs: https://simpleisbetterthancomplex.com/2015/12/04/package-of-the-week-django-widget-tweaks.html -->
      <a href="{% url 'home' %}" class="btn btn-secondary">
        <span class="fa fa-times"></span> Cancel
      </a>
    </div>

  </form>