在 Django 表单中使用正确的 Bootstrap CSS 进行单选表单输入

如何让 Django 表单将正确的 Bootstrap 渲染到 Radio select 表单输入？

我在表单中传递了 form-control form-check classess，但生成的表单 HTML 对于 radio select 选项并不准确。

我正在寻找渲染引导程序原色和内联单选按钮。

表单

class PersonForm(forms.Form):
Gender = forms.ChoiceField(required=True, widget=forms.RadioSelect(
    attrs={"label":"Gender", "id":"G", "placeholder": "Gender", "class":"form-control form-check"}), choices=genders.items)

HTML

<div id="G" class="form-control form-check">
<div>
    <label for="G_0"><input type="radio" name="Gender" value="M" label="Gender" id="G_0" placeholder="Gender" class="form-control form-check" required="">
 Male</label>

</div>
<div>
    <label for="G_1"><input type="radio" name="Gender" value="F" label="Gender" id="G_1" placeholder="Gender" class="form-control form-check" required="">
 Female</label>

</div>
<div>
    <label for="G_2"><input type="radio" name="Gender" value="N" label="Gender" id="G_2" placeholder="Gender" class="form-control form-check" required="">
 Not-Applicable</label>
</div>

你几乎做对了！问题出在你将 form-control 和 form-check 类应用到了错误的元素上。在 Bootstrap 中，你需要对 input 元素应用 form-check-input 类，对 label 元素应用 form-check-label 类。

此外，你不需要 placeholder 属性，因为单选按钮没有占位符。

以下是更新后的代码：

表单:

class PersonForm(forms.Form):
    Gender = forms.ChoiceField(
        required=True,
        widget=forms.RadioSelect(attrs={'class': 'form-check-input'}),
        choices=genders.items,
        label="Gender",
    )

模板:

<div class="form-group">
  {{ form.Gender.label_tag }}
  {% for radio in form.Gender %}
  <div class="form-check">
    {{ radio }}
    <label class="form-check-label" for="{{ radio.id_for_label }}">
      {{ radio.choice_label }}
    </label>
  </div>
  {% endfor %}
</div>

这段代码将会：

1. 为每个单选按钮创建一个 div ，并添加 form-check 类，以实现内联布局。
2. 将 form-check-input 类应用到每个 input 元素。
3. 将 form-check-label 类应用到每个 label 元素。
4. 使用 radio.id_for_label 动态地将 label 与相应的 input 元素关联起来。

通过这些更改，你的单选按钮现在将正确地使用 Bootstrap 的样式。