我正在尝试使用引导类自定义 Django 中的复选框和收音机.但是，它并没有奏效.

我已经尝试使用 widgets 和 attrs 在 forms.py 中插入引导类:custom-control custom-radio custom-control-inline custom-control-input custom-control-label

我的代码:

models.py

Y = 1N = 2YN = ((是，是")，(N, '不'),)类道具(模型.模型):yesorno = models.IntegerField(choices=YN, default=Y, verbose_name='Label...')

forms.py

类 PropForm(forms.ModelForm):元类:模型 = 道具排除 = ()小部件={'yesorno': forms.RadioSelect(属性={'class':'自定义控件输入自定义控件标签',}),}

模板.html

<form action="" method="POST">{% csrf_token %}<div class="custom-control custom-radio custom-control-inline">{{ form.yesorno.label_tag }} {{ form.yesorno }}</div></表格>

HTML 渲染

<div class="custom-control custom-radio custom-control-inline"><label for="id_yesorno_0">标签...?</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">是</标签></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="">没有</label></li></ul></div>

我想使用自定义引导样式(

到目前为止我最好的解决方案.我不得不手动渲染.

template.html

<!-- 收音机 --><div class="form-group">{{ form.field_name.label_tag }}{% for pk，在 form.field_name.field.widget.choices 中选择 %}<div class="custom-control custom-radio custom-control-inline"><input id="id_{{form.field_name.name}}_{{ forloop.counter0 }}" name="{{form.field_name.name}}" type="{{form.field_name.field.widget.input_type}}" value="{{pk}}" class="custom-control-input"{% ifequal form.field_name.data pk.0 %}检查=检查"{% endifequal %}/><label for="id_{{form.field_name.name}}_{{ forloop.counter0 }}" class="custom-control-label">{{ 选择 }}</label></div>{% endfor %}</div><!-- 复选框--><div class="form-group">{{ form.field_name.label_tag }}{% for pk，在 form.field_name.field.widget.choices 中选择 %}<div class="custom-control custom-checkbox custom-control-inline"><input id="id_{{form.field_name.name}}_{{ forloop.counter0 }}" name="{{form.field_name.name}}" type="{{form.field_name.field.widget.input_type}}" value="{{pk}}" class="custom-control-input"{% ifequal form.field_name.data pk.0 %}检查=检查"{% endifequal %}/><label for="id_{{form.field_name.name}}_{{ forloop.counter0 }}" class="custom-control-label">{{ 选择 }}</label></div>{% endfor %}</div>

I am trying to customize the checkboxes and radios in Django using bootstrap class. However, it has not worked.

I already tried to insert the bootstrap class in forms.py with widgets and attrs: custom-control custom-radio custom-control-inline custom-control-input custom-control-label

My code:

models.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',
                }
            ),
        }

template.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 rendered

<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>

I would like to use the custom bootstrap style (https://getbootstrap.com/docs/4.3/components/forms/#radios).

I need to render an HTML like in the code below:

<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:

My best solution so far. I had to render manually.

template.html

<!-- radio -->
<div class="form-group">
    {{ form.field_name.label_tag }}
    {% for pk, choice in form.field_name.field.widget.choices %}
    <div class="custom-control custom-radio custom-control-inline">
        <input id="id_{{form.field_name.name}}_{{ forloop.counter0 }}" name="{{form.field_name.name}}" type="{{form.field_name.field.widget.input_type}}" value="{{pk}}" class="custom-control-input"
         {% ifequal form.field_name.data pk.0 %}
           checked="checked"
         {% endifequal %}/>
        <label for="id_{{form.field_name.name}}_{{ forloop.counter0 }}" class="custom-control-label">{{ choice }}</label>
    </div>
    {% endfor %}
</div>

<!-- checkbox -->
<div class="form-group">
    {{ form.field_name.label_tag }}
    {% for pk, choice in form.field_name.field.widget.choices %}
    <div class="custom-control custom-checkbox custom-control-inline">
        <input id="id_{{form.field_name.name}}_{{ forloop.counter0 }}" name="{{form.field_name.name}}" type="{{form.field_name.field.widget.input_type}}" value="{{pk}}" class="custom-control-input"
         {% ifequal form.field_name.data pk.0 %}
           checked="checked"
         {% endifequal %}/>
        <label for="id_{{form.field_name.name}}_{{ forloop.counter0 }}" class="custom-control-label">{{ choice }}</label>
    </div>
    {% endfor %}
</div>