将引导标签放在复选框下方？答案

【问题标题】：Put bootstrap label below checkbox?将引导标签放在复选框下方？
【发布时间】：2021-03-11 23:52:00
【问题描述】：

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

.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>，我会得到这个（上面有更多空间）

【问题讨论】：

在之前添加
标签。
您是否尝试过使用显示属性？ developer.mozilla.org/en-US/docs/Web/CSS/display

标签： html css twitter-bootstrap checkbox bootstrap-4

【解决方案1】：

当您使用引导程序自定义标签时，如果您希望文本出现在复选框下方，您需要覆盖复选框容器的 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>

【讨论】：

【解决方案2】：

通过在 <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>

【讨论】：

【解决方案3】：

实现这一点的最简单方法是将复选框转换为 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>

【讨论】：

如果您仔细观察 block 在复选框下方制作文本，但还在 fsdfs 之前添加额外空格。
因为标签。标签在其编程方式之前添加了一个空格（向左填充：6px；）。不是因为复选框是块级元素。
Stackoverflow 不能在 sn-p 中使用引导程序。如果我删除 custom-control-input 和 custom-control-label，您的解决方案将有效，但如果我使用该引导类，则不会。
@Xtreme 您可以在引导 css 下方添加自定义 css，然后它就可以正常使用并覆盖引导 css。或者将其添加为内联样式以赋予其更高的比重。当然，您可以在堆栈片段中使用引导 css。您只需要链接引导库。

【解决方案4】：

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

【讨论】：

您应该始终解释您的 anwser 并使用代码 sn-p (ctrl + m) 来验证您的解决方案是否有效。只需发布一条无法解释的代码行，OP 现在就需要付出很多努力来了解您所做的事情以及如何重现它。