用Django和bootstrap类创建无线电选择表单时出现的问题

Question

我试图用Django创建一个带有单选按钮选项的表单。该网站是在bootstrap4中设计的，由于某些原因，当应用自定义控件输入类时，按钮会消失。在

我从一个静态模板开始，它呈现得非常完美。这些按钮组的代码如下：

<div class="form-group row">
    <div class="col-sm-2">Sexo</div>
    <div class="col-sm-10">
        <div class="custom-control custom-radio">
            <input type="radio" class="custom-control-input" id="sexo1" name="sexoRadios">
            <label class="custom-control-label" for="sexo1">Mujer</label>
        </div>
        <div class="custom-control custom-radio">
            <input type="radio" class="custom-control-input" id="sexo2" name="sexoRadios">
            <label class="custom-control-label" for="sexo2">Hombre</label>
        </div>
    </div>
</div>

为了在Django中创建表单，我向表单.py文件：

^{pr2}$

这使得单选按钮由于某种原因而消失。如果我分析一下django创建的HTML，它看起来非常类似于静态web。在

<div class="form-group row">
    <div class="col-sm-2">Sexo</div>
    <div class="col-sm-10">
      <div class="custom-control custom-radio">
          <label for="id_sexo_0"><input type="radio" name="sexo" value="hombre" class="custom-control-input" id="id_sexo_0" required>Hombre</label>
      </div>
      <div class="custom-control custom-radio">
          <label for="id_sexo_1"><input type="radio" name="sexo" value="mujer" class="custom-control-input" id="id_sexo_1" required>Mujer</label>
      </div>
    </div>
</div>

但是，当我使用googlechrome检查对象时，我发现input标记具有以下CSS属性：

.custom-control-input {
    position: absolute;
    z-index: -1;
    opacity: 0;
}

问题似乎来自于label标签的类。有没有办法给标签分配一个类？在

非常感谢。在

Answer 1

我设法解决了我的问题。这是我离开HTML模板的方式：

<div class="form-group row">
    <div class="col-sm-2">Sexo</div>
    <div class="col-sm-10">
    {% for radio in form.sexo %}
        <div class="custom-control custom-radio">
            {{ radio.tag }}
            <label class="custom-control-label" for="{{ radio.id_for_label }}">{{ radio.choice_label }}</label>
        </div>
    {% endfor %}
    </div>
</div>

无论如何谢谢你。问候

Answer 2

或许可以帮助某人：How to custom checkbox and radio in Django using Bootstrap

模板.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>