Html 垂直div和对齐之间的空间

我对div间距有一些问题。 以下是html：

            <div class="row">
              <div class="col-lg-4">
                <div class="checkbox checkbox-circle checkbox-business">
                    <input id="checkbox-business-id" class="styled" type="checkbox">
                    <label for="checkbox-business-id">BUSINESS</label>
                </div>
                <div class="checkbox checkbox-circle checkbox-health">
                    <input id="checkbox-health-id" class="styled" type="checkbox">
                    <label for="checkbox-health-id">HEALTH</label>
                </div>
                <div class="checkbox checkbox-circle checkbox-science">
                    <input id="checkbox-science-id" class="styled" type="checkbox">
                    <label for="checkbox-science-id">SCIENCE</label>
                </div>
                <div class="checkbox checkbox-circle checkbox-technology">
                    <input id="checkbox-technology-id" class="styled" type="checkbox">
                    <label for="checkbox-technology-id">TECHNOLOGY</label>
                </div>
            </div>
           </div>

我希望在div之间留出一些空间，并且我希望所有复选框都对齐。我无法这样做。此外，我正在使用引导

谁能看一下吗

小提琴：

---

添加以下样式。这应该是你想要的

header.masthead {
    text-align: left;
}
.checkbox {
    margin-bottom: 20px;
    height: 30px;
}

.checkbox label::before {
    width: 30px;
    height: 30px;

}
.checkbox label::after {
    padding-top: 3px;
    padding-left: 5px;
}


.checkbox input {
    width: 20px;
    height: 16px;
}
.checkbox input[type="checkbox"]:checked + label::after, .checkbox input[type="radio"]:checked + label::after {
    font-family: "FontAwesome";
    content: "\f00c";
    font-size: 18px;
        padding: 1px 5px;
}
.checkbox label {
    padding-left: 20px;
    line-height: 30px;
}

---

检查更新的代码

添加以下样式。这应该是你想要的

header.masthead {
    text-align: left;
}
.checkbox {
    margin-bottom: 20px;
    height: 30px;
}

.checkbox label::before {
    width: 30px;
    height: 30px;

}
.checkbox label::after {
    padding-top: 3px;
    padding-left: 5px;
}


.checkbox input {
    width: 20px;
    height: 16px;
}
.checkbox input[type="checkbox"]:checked + label::after, .checkbox input[type="radio"]:checked + label::after {
    font-family: "FontAwesome";
    content: "\f00c";
    font-size: 18px;
        padding: 1px 5px;
}
.checkbox label {
    padding-left: 20px;
    line-height: 30px;
}

检查更新的代码这将对您有所帮助

.checkbox {
    text-align: left;
    margin-bottom: 20px;
}

这对你有帮助

.checkbox {
    text-align: left;
    margin-bottom: 20px;
}

---

首先，您需要找到任何设置

text align:center并将其删除。在我看来，复选框看起来像单选按钮，您用什么来设置它们的样式？没错，我希望是圆形样式。text-align:center；似乎是在引导类中定义的。它们在我的计算机上正确对齐。似乎conatiner div上的某些样式将复选框居中。检查Niet建议检查的内容。首先，您需要找到任何设置
text align:center并将其删除。在我看来，复选框看起来像单选按钮，您用什么来设置它们的样式？没错，我希望是圆形样式。text-align:center；似乎是在引导类中定义的。它们在我的计算机上正确对齐。似乎conatiner div上的某些样式将复选框居中。检查Niet建议检查的内容谢谢！你有办法让复选框更大吗？另外，我需要复选框和标签处于同一水平，你能帮我吗？请现在检查。谢谢！你有一个想法，使复选框更大？另外，我需要复选框和标签在同一个水平，你能帮我吗？请检查现在。