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

【问题标题】：Place Custom Checkbox Icon to right of label Bootstrap 4将自定义复选框图标放在标签 Bootstrap 4 的右侧
【发布时间】：2019-02-21 07:10:48
【问题描述】：

我已经尝试了所有方法，但无法将复选框放在标签上。如果它是一般类型的复选框，我可以将复选框移动到标签的右侧。但是我不能对自定义复选框类型做同样的事情。

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

【问题讨论】：

标签： css checkbox bootstrap-4

【解决方案1】：

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

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

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

【讨论】：

【解决方案2】：

较早的@serg-chernata 答案似乎不适用于custom-switch。这是我开始工作的一个例子。

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。

【讨论】：

【解决方案3】：

如果你没问题……

标签和复选框之间的距离更大
使用基本的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>

【讨论】：