html - 垂直 div 和对齐之间的空间

Question

我在 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>

和 CSS:

.checkbox-business {
   margin-top: 10px;
 }

.checkbox-health {
  margin-top: 10px;
}

.checkbox-science {
  margin-top: 10px;
}

.checkbox-technology {
  margin-top: 10px;
}

我想在 div 之间留出一些空间，并且我希望所有复选框都对齐。我无法做到这一点。另外，我正在使用 Bootstrap 。

有人可以看一下吗？

fiddle : https://jsfiddle.net/paul28/do5efo1w/2/

Answer 1

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

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;
}

检查更新代码 here