Html 如何将组中的复选框与引导对齐

我有一个名为severity的复选框组，它们分为两行，每行有3个复选框

但是，复选框的垂直对齐并不正确

我需要没有分类，警告和高在一行和其他低于这一行

我用一个额外的空div来划分它们，有没有更好的方法来实现这一点。 以及如何将复选框与引导正确对齐

正如您所看到的，警告和平均值未对齐

<div class="form-group">
                    <label for="name" class="col-sm-4 control-label">Severity</label>
                    <div class="col-sm-8">
                        <div class="checkbox-inline">
                            <input class="form-check-input" type="checkbox" id="severity_0" name="severity[]" value="0">
                            <label class="form-check-label" for="severity_0">Not classified</label>  
                        </div>
                        <div class="checkbox-inline">
                            <input class="form-check-input" type="checkbox" id="severity_2" name="severity[]" value="2">
                            <label class="form-check-label" for="severity_2">Warning</label>
                        </div>
                        <div class="checkbox-inline">
                            <input class="form-check-input" type="checkbox" id="severity_4" name="severity[]" value="4">
                            <label class="form-check-label" for="severity_4">High</label>
                        </div>
                        <div></div>
                        <div class="checkbox-inline">
                            <input class="form-check-input" type="checkbox" id="severity_1" name="severity[]" value="1">
                            <label class="form-check-label" for="severity_1">Information</label>  
                        </div>
                        <div class="checkbox-inline">
                            <input class="form-check-input" type="checkbox" id="severity_3" name="severity[]" value="3">
                            <label class="form-check-label" for="severity_3">Average</label>
                        </div>
                        <div class="checkbox-inline">
                            <input class="form-check-input" type="checkbox" id="severity_5" name="severity[]" value="5">
                            <label class="form-check-label" for="severity_5">Disaster</label>
                        </div>
                    </div>
                </div>

严重程度
未分类
警告
高
信息
平均值
灾难

---

您可以使用

col

进行布局，但更简单的是使用

显示：网格


.checkbox包装器{
显示：网格；
网格模板列：重复（3，1fr）；
网格模板行：重复（2，1fr）；
}

严重程度
未分类
警告
高
问询处
平均值
灾难
您可以使用此代码



.表格组{
利润率：15px；
}


引导示例
严重程度
未分类
警告
高
问询处
平均值
灾难
无需添加额外的CSS。使用引导的网格系统对齐复选框



未分类
警告
…添加更多。。。
哪个版本的引导？Bootstrap 4具有表单检查类：Hi@NathanielFlick其版本4.1.3My此处唯一的注释是“严重性”不应是标签元素，因为它不与表单控件关联。这是一个标题。