一、美化代码与图示

1.1 美化前

1.2 美化后

1.3 代码

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

1.把按钮加入按钮组

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

2.把按钮组分散对齐

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

二、Bootstrap — row / col 样式介绍

2.1 row行样式

居左(默认) .justify-content-start
居中 .justify-content-center
居右 .justify-content-end
间隔相等(分散) .justify-content-around
两端对齐(分散) .justify-content-between

2.2 col列样式

居顶(默认) .align-items-start
居中 .align-items-center
居底 .align-items-end
栅格的列可以排序，使用.order-N，N 最大值为 12；
使用.order-first，强行设置列为第一列，而.order-last 为最后一列；
使用.offset-N 或.offset-*-N 来设置列的偏移量，1 表示一个栅格
使用.ml-N 或.mr-N 来微调列距离，使用.ml-auto 和.mr-auto 来左右

三、Reference

Bootstrap 对齐和排列: https://www.cnblogs.com/seeding/p/15349229.html

【Bootstrap】前端美化—Bootstrap实现按钮组分散对齐相关推荐

html 强制分散对齐,CSS 水平分散对齐
想要一排按钮均匀分散对齐: 主页主页主页主页主页自然想到用text-align text-align: justify; 但有个问题, justify 是说对于多行文字,中间的文字分散对齐, ...
爬虫训练场项目前端之 Bootstrap 信息提示框，按钮与按钮组，徽章，进度条
爬虫训练场项目前端之 Bootstrap 信息提示框,按钮与按钮组,徽章,进度条 Bootstrap5 信息提示框 Bootstrap 5 按钮和按钮组 Bootstrap 5 徽章进度条 Boot ...
吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：按钮组
<!DOCTYPE html> <html> <head><meta charset="utf-8"> <title>B ...
Bootstrap组件——【按钮（预定义样式类、边框颜色、大小、激活和禁用状态、按钮标签）、按钮组（定义按钮组、工具栏按钮组、大小、嵌套按钮、垂直排列）、下拉菜单（定义下拉菜单、下拉菜单样式）】
一.按钮按钮是网页中不可缺少的一种组件,例如页面中搜索.注册等按钮.按钮还广泛应用于表单.下拉菜单.模态框等场景中. 1.预定义样式类 Bootstrap提供了btn来定义按钮,btn ...
Bootstrap 按钮组
按钮组允许多个按钮被堆叠在同一行上.当你想要把按钮对齐在一起时,这就显得非常有用.您可以通过 Bootstrap 按钮(Button) 插件添加可选的 JavaScript 单选框和复选框样式行为. ...
Bootstrap组件_按钮组
按钮组通过按钮组容器把一组按钮放在同一行里.通过与按钮插件联合使用,可以设置为单选框或多选框的样式和行为.<!DOCTYPE html> <html lang="en&qu ...
Bootstrap两端对齐的按钮组
两端对齐的按钮组 Bootstrap3两端对齐的按钮组可以将一组按钮拉长为相同的尺寸,并让整个按钮组填满父元素的宽度.对于按钮组中的按钮式下拉菜单也同样适用. 如果按钮组中的按钮是 <a> ...
Bootstrap禁用某个按钮组
禁用某个按钮组某些特殊情况下,可能需要垂直分组的按钮效果.这也很简单,只需把 .btn-group类换成.btn-group-vertical类,就可以让按钮组中的按钮堆叠排列.堆叠排列的按钮组中, ...
Bootstrap按钮组嵌套
按钮组嵌套按钮组允许嵌套,即可以在一个.btn-group中嵌套另一个.btn-group.比如,当你想给按钮组中的某一个按钮添加下拉菜单时,就会用到这种嵌套结构.如: <div class= ...

【Bootstrap】前端美化—Bootstrap实现按钮组分散对齐