django - 单选按钮呈现在表单的其余部分之上

问题描述

我在 Django 上使用带有 Python 的香草引导程序。我已经配置了一个带有单选按钮的表单，但是按钮呈现在字段顶部，如下面的屏幕截图所示。

我注意到 Django 将单选按钮放入列表中，我认为这可能是原因，所以我尝试使用 CSS 禁用标签，但单选按钮仍然漂浮在顶部，只是没有列表项目符号。

表格.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')

      <form action="/monzo/merchantgroups/update/799/" method="post">
                
                
                <input type="hidden" name="csrfmiddlewaretoken" value="ZWtsz3JDsnUtu1mj6NO3SDlBuyJyEpDgbZUDC6elfTPK2DCwWevD2BpirSZJOhiM">
                
                
                    <div class="form-group">
                        <label for="id_do_what_0">Do what:</label>
                        <ul id="id_do_what" class="custom-radio-list form-control">
    <li><label for="id_do_what_0"><input type="radio" name="do_what" value="merge" class="custom-radio-list form-control" required id="id_do_what_0">
 Merge</label>

</li>
    <li><label for="id_do_what_1"><input type="radio" name="do_what" value="update" class="custom-radio-list form-control" required id="id_do_what_1">
 Update</label>

</li>
</ul>
                        
                        
                    </div>
                
                    <div class="form-group">
                        <label for="id_merge_merchantgroup">Merge merchantgroup:</label>
                        <select name="merge_merchantgroup" class="form-control" id="id_merge_merchantgroup">
  <option value="" selected>Merge with</option>

  <option value="203">ATM</option>

  <option value="799">Amazon</option>

  <option value="200">Post Office</option>

  <option value="201">Virgin Media</option>

  <option value="202">www.modelsport.co.uk</option>

</select>
                        
                        
                    </div>
                
                    <div class="form-group">
                        <label for="id_name">Name:</label>
                        <input type="text" name="name" value="Amazon" class="form-control" id="id_name">
                        
                        
                    </div>
                
                    <div class="form-group">
                        <label for="id_default_ledger">Default ledger:</label>
                        <select name="default_ledger" class="form-control" id="id_default_ledger">
  <option value="">---------</option>

  <optgroup label="Accounts">
  <option value="20">Jacks Account</option>

  <option value="32">Jacks Monzo</option>

  <option value="21">Janes Account</option>

  <option value="126">Janes Monzo</option>

  <option value="22">Joint Account</option>

  </optgroup>
  <optgroup label="Bills">
  <option value="7">Council tax</option>

  <option value="6">Electricity &amp; Gas</option>

  </optgroup>
  <optgroup label="Cash">
  <option value="23">Jacks Float</option>

  <option value="24">Janes Float</option>

  </optgroup>
  <optgroup label="Food &amp; Home">
  <option value="8">Basic food</option>

  <option value="9">Coffee &amp; Snacks</option>

  <option value="11">Home Supplies</option>

  <option value="10">Take away</option>

  </optgroup>
  </optgroup>
  <optgroup label="Property">
  <option value="19">Property</option>

  </optgroup>
  <optgroup label="Purchases">
  <option value="31">Computer &amp; Electrical</option>

  <option value="30">Hobbies</option>

  <option value="29" selected>Toys</option>

  </optgroup>
  <optgroup label="Reserves">
  <option value="27">Profit &amp; Loss Accounts</option>

  </optgroup>
  <optgroup label="Taxation">
  <option value="5">Income tax</option>

  </optgroup>
  <optgroup label="Taxation">
  <option value="25">Tax Liability</option>

  </optgroup>
  <optgroup label="Travel">
  <option value="17">Public Transport</option>

  <option value="18">Taxis</option>

  </optgroup>
</select>
                        
                        
                    </div>
                
                    <div class="form-group">
                        <label for="id_disable_AI">Disable AI:</label>
                        <input type="checkbox" name="disable_AI" class="form-control" id="id_disable_AI" checked>
                        
                        
                    </div>
                
                <input type="submit" class="btn btn-primary">
            </form>

标签： djangobootstrap-4

django - 单选按钮呈现在表单的其余部分之上

问题描述

解决方案

推荐阅读