Радиокнопки отображаются поверх остальной формы

Я использую ванильный bootstrap с Python на Django. Я настроил форму с радиокнопками, однако кнопки отображаются поверх полей, как показано на скриншоте ниже.

Я заметил, что Django помещает радиокнопки в список, и я подумал, что это может быть причиной, поэтому я попробовал использовать CSS, чтобы отключить этот тег, но радиокнопки по-прежнему плавают сверху, только без пули списка

enter image description here

Forms.py

class MerchantGroupForm(forms.Form):
    DO_WHAT_CHOICES=[('merge','Merge'),
                    ('update','Update')]

    #do_what = forms.ChoiceField(choices=DO_WHAT_CHOICES, widget=forms.RadioSelect(attrs={'class': "custom-radio-list"}))
    do_what = forms.ChoiceField(choices=DO_WHAT_CHOICES, widget=forms.RadioSelect)

    merge_merchantgroup = forms.ModelChoiceField(required=False, queryset=MerchantGroup.objects.all().order_by('name'), empty_label="Merge with")
    name = forms.CharField(required=False)
    default_ledger = GroupedModelChoiceField(required=False, queryset=Ledger.objects.all().order_by('coa_sub_group__name','name'), choices_groupby = 'coa_sub_group')
    disable_AI = forms.BooleanField(required=False, label='Disable AI')

Если на скриншоте, который вы показали, есть шаблон предыдущего .html кода, то Django ничего не делает, потому что вы не используете Django form для рендеринга вашей формы. Это просто обычная HTML/Bootstrap форма.

Вот как использовать Django Form.

Также если вы хотите группировать радиоприемники в одном горизонтальном ряду с помощью Bootstrap, то вы можете добавить .form-check-inline к любому .form-check как написано на странице Bootstrap inline radio button.

<div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" id="merge" 
    value="merge">
    <label class="form-check-label" for="merge">Merge</label>
</div>
<div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" id="update" 
    value="update">
    <label class="form-check-label" for="update">update</label>
</div>

NB : Я думаю, что ваш первый .form-group не очень хорошо структурирован. Вы можете посетить Bootstrap form, чтобы сделать это хорошо.

Удаление класса form-control помогло. Согласно документации Bootstrap, этот класс предназначен только для определенных полей, и, видимо, радио не входит в их число.

Вернуться на верх