1. Beautify the code and icon

1.1 Before beautification

insert image description here

1.2 After beautification

insert image description here

1.3 Code

<div class="row justify-content-between"> 
   <div class="btn-group btn-group-justified"> 
    <input type="radio" class="btn-check" name="scan_type" value="full_scan" id="option1" autocomplete="off" checked="" /> 
    <label class="btn btn-secondary" for="option1">完全扫描</label> 
    <input type="radio" class="btn-check" name="scan_type" value="high_risk_vuln" id="option2" autocomplete="off" /> 
    <label class="btn btn-secondary" for="option2">高风险漏洞扫描</label> 
    <input type="radio" class="btn-check" name="scan_type" value="xss_vuln" id="option3" autocomplete="off" /> 
    <label class="btn btn-secondary" for="option3">XSS漏洞扫描</label> 
    <input type="radio" class="btn-check" name="scan_type" value="sql_vuln" id="option4" autocomplete="off" /> 
    <label class="btn btn-secondary" for="option4">SQL注入漏洞扫描</label> 
    <input type="radio" class="btn-check" name="scan_type" value="weak_passwords" id="option5" autocomplete="off" /> 
    <label class="btn btn-secondary" for="option5">弱口令扫描</label> 
    <input type="radio" class="btn-check" name="scan_type" value="crawl_only" id="option6" autocomplete="off" /> 
    <label class="btn btn-secondary" for="option6">仅爬取</label> 
    <input type="radio" class="btn-check" name="scan_type" value="Malware_Scan" id="option7" autocomplete="off" /> 
    <label class="btn btn-secondary" for="option7">恶意软件扫描</label> 
   </div> 
  </div>

1.3 steps

1. Add the button to the button group

<div class="btn-group btn-group-justified"> </div>

2. Disperse and align the button groups

<div class="row justify-content-between"> </div>

Two, Bootstrap — row / col style introduction

2.1 row style

Left (default) .justify-content-start
centered. justify-content-center
right. justify-content-end
equally spaced (dispersed) .justify-content-around
both ends aligned (dispersed) .justify-content-between

2.2 col column style

top (default) .align-items-start
centered .align-items-center
bottom .align-items-end
grid columns can be sorted, use .order-N, the maximum value of N is 12;
use .order-first , forcibly set the column as the first column, and .order-last as the last column;
use .offset-N or .offset-*-N to set the offset of the column, 1 means a grid
uses .ml-N or . mr-N to fine-tune column distance, use .ml-auto and .mr-auto to left and right

3. Reference

Bootstrap alignment and arrangement: https://www.cnblogs.com/seeding/p/15349229.html

[Bootstrap] Front-end beautification—Bootstrap implements scattered alignment of button groups