我正在尝试使用 bootstrap 类自定义 Django 中的复选框和单选按钮。然而,这并没有奏效。
我已经尝试在 forms.py 中插入引导类widgets
and attrs
:
custom-control custom-radio custom-control-inline custom-control-input custom-control-label
My code:
模型.py
Y = 1
N = 2
YN = (
(Y, 'yes'),
(N, 'no'),)
class Prop(models.Model):
yesorno = models.IntegerField(choices=YN, default=Y, verbose_name='Label...')
forms.py
class PropForm(forms.ModelForm):
class Meta:
model = Prop
exclude = ()
widgets={
'yesorno': forms.RadioSelect(
attrs={
'class':'custom-control-input custom-control-label',
}
),
}
模板.html
<form action="" method="POST">
{% csrf_token %}
<div class="custom-control custom-radio custom-control-inline">
{{ form.yesorno.label_tag }} {{ form.yesorno }}
</div>
</form>
HTML 呈现
<div class="custom-control custom-radio custom-control-inline">
<label for="id_yesorno_0">Label...?</label>
<ul id="id_yesorno" class="custom-control-input custom-control-label">
<li>
<label for="id_yesorno_0"><input type="radio" name="yesorno" value="1" class="custom-control-input custom-control-label" required="" id="id_yesorno_0">yes</label>
</li>
<li>
<label for="id_yesorno_1"><input type="radio" name="yesorno" value="2" class="custom-control-input custom-control-label" required="" id="id_yesorno_1" checked="">no</label>
</li>
</ul>
</div>
我想使用自定义引导样式(https://getbootstrap.com/docs/4.3/components/forms/#radios).
我需要渲染一个 HTML,如下面的代码所示:
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="customRadioInline1" name="customRadioInline1" class="custom-control-input">
<label class="custom-control-label" for="customRadioInline1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="customRadioInline2" name="customRadioInline1" class="custom-control-input">
<label class="custom-control-label" for="customRadioInline2">Or toggle this other custom radio</label>
</div>
Expected result:
![custom checkbox and radio in Django using bootstrap](https://i.stack.imgur.com/2q0Fq.png)