垂直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。

有人可以看一下吗？

小提琴： 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

Answer 2

这会帮助你

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