将自定义复选框图标放置在标签Bootstrap 4的右侧

Question

我已经尝试了所有方法，但是无法在标签的右边放置复选框。如果它是复选框的常规类型，则可以将其移至标签的右侧。但是我无法对自定义复选框类型进行同样的操作。

<div class="custom-control custom-checkbox mb-3">
  <input type="checkbox" class="custom-control-input" id="customCheck" name="example1">
  <label class="custom-control-label" for="customCheck">Label</label>
</div>

Answer 1

自定义复选框是使用伪元素创建的，因此需要相对于标签调整其位置。

traefik-acme

.custom-control.custom-checkbox{padding-left: 0;}

label.custom-control-label {
  position: relative;
  padding-right: 1.5rem;
}

label.custom-control-label::before, label.custom-control-label::after{
  right: 0;
  left: auto;
}

Answer 2

在custom-switch下，较早的@ serg-chernata答案似乎不适用于我。这是我正在工作的示例。

CSS

div.custom-control-right {
    padding-right: 24px;
    padding-left: 0;
    margin-left: 0;
    margin-right: 0;
}
div.custom-control-right .custom-control-label::after{
    right: -1.5rem;
    left: auto;
}
div.custom-control-right .custom-control-label::before {
    right: -2.35rem;
    left: auto;
}

HTML

<div class="custom-control custom-control-right custom-switch">
    <input type="checkbox" class="custom-control-input" disabled id="customSwitch2">
    <label class="custom-control-label" for="customSwitch2">Right switch element</label>
</div>

JsFiddle

https://jsfiddle.net/2cmbq9r0/

屏幕截图

编辑：将left:initial更改为left:auto以使其与IE11兼容。

Answer 3

如果您对...没事的话

1. 标签与复选框之间的距离更大
2. 使用基本的form-check类而不是custom-control

然后另一种方法是使用col-right类将复选框移动到表单的另一端。在某些情况下，我发现将标签和输入元素分别在最左端和最右端对齐可以提供很好的一致外观

<div class="row form-row">
  <div class="col">
    <label class="form-check-label" for="customCheck">Label</label>
  </div>
  <div class="col-right">
    <input type="checkbox" class="form-check-input" id="customCheck" name="example1">
  </div>
</div>