将 bootstrap 标签放在复选框下方？

Question

如何将 bootstrap 标签放在复选框下方？

.checkbox-lg .custom-control-label::before,
.checkbox-lg .custom-control-label::after {
  width: 1.55rem;
  height: 1.55rem;
}

.checkbox-lg .custom-control-label {
  padding-left: 6px;
}

<div class="custom-control custom-checkbox checkbox-lg">
  <input type="checkbox" class="custom-control-input" id="delivery-checkbox-18" name="deliveryAddresses[]" value="">
  <label class="custom-control-label" for="delivery-checkbox-18">
    fsdfs <br>
    sdfsd <br>
    sdfsdf <br>
    434 sdfsd
    </label>
</div>

我得到这个结果

但我想要这个结果

如果我先添加更多 <br> 我会得到这个（更多 space 以上）

Answer 1

<div class="custom-control custom-checkbox checkbox-lg">
  <input type="checkbox" class="custom-control-input" id="delivery-checkbox-18" name="deliveryAddresses[]" value="">
  <label class="custom-control-label" for="delivery-checkbox-18">
      <br>
    fsdfs <br>
    sdfsd <br>
    sdfsdf <br>
    434 sdfsd
    </label>
</div>

Answer 2

最简单的实现方法是将复选框转换为 CSS 中的块级元素：input[type='checkbox'] { display: block; }

.checkbox-lg .custom-control-label::before,
.checkbox-lg .custom-control-label::after {
  width: 1.55rem;
  height: 1.55rem;
}

.checkbox-lg .custom-control-label {
  padding-left: 6px;
}

input[type='checkbox'] {
  display: block;
}

<div class="custom-control custom-checkbox checkbox-lg">
  <input type="checkbox" class="custom-control-input" id="delivery-checkbox-18" name="deliveryAddresses[]" value="">
  <label class="custom-control-label" for="delivery-checkbox-18">fsdfs<br>
sdfsd <br>
sdfsdf <br>
434 sdfsd
</label>
</div>

Answer 3

在你的 <label> 标签对我有用之后添加 <br> 标签。请参阅下面的 HTML 代码：

.checkbox-lg .custom-control-label::before,
.checkbox-lg .custom-control-label::after {
  width: 1.55rem;
  height: 1.55rem;
}

.checkbox-lg .custom-control-label {
  padding-left: 6px;
}

<div class="custom-control custom-checkbox checkbox-lg">
  <input type="checkbox" class="custom-control-input" id="delivery-checkbox-18" name="deliveryAddresses[]" value="">
  <label class="custom-control-label" for="delivery-checkbox-18"><br>
    fsdfs <br>
    sdfsd <br>
    sdfsdf <br>
    434 sdfsd
    </label>
</div>

Answer 4

由于您正在使用 bootstrap 自定义标签，如果您希望文本出现在复选框下方，您需要覆盖复选框容器的 padding-left，然后将 padding top 添加到您的标签：

@import url(https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css);
.checkbox-lg {
  padding-left: 0.2rem; /* remove left padding from container (needs 0.2rem to show outline when focused */
}

.checkbox-lg .custom-control-label::before,
.checkbox-lg .custom-control-label::after {
  width: 1.55rem;
  height: 1.55rem;  
  left: 0.2rem; /* this should be the same as the padding left set above so checkbox lines up with content */
}

.checkbox-lg .custom-control-label {
  padding-top: 2rem;  /* this must be more than the height you set above */
}

<div class="custom-control custom-checkbox checkbox-lg">
  <input type="checkbox" class="custom-control-input" id="delivery-checkbox-18" name="deliveryAddresses[]" value="">
  <label class="custom-control-label" for="delivery-checkbox-18">
    fsdfs <br>
    sdfsd <br>
    sdfsdf <br>
    434 sdfsd
    </label>
</div>

将 bootstrap 标签放在复选框下方？

Put bootstrap label below checkbox?

html

css

checkbox

twitter-bootstrap

bootstrap-4