将复选框标签移动到引导自定义复选框的左侧

Question

我有一个复选框

<div class="custom-control custom-checkbox custom-control-inline">
   <input type="checkbox"  id="location"  v-model="checkedLocations"   value="location" name="customRadioInline1" class="custom-control-input">
   <label class="custom-control-label" for="location"> Option 1</label>
</div>

如何移动标签以显示在左侧？ 我曾尝试更改订单，但它只是破坏了复选框功能。

    <div class="custom-control custom-checkbox custom-control-inline">
         <label class="custom-control-label" for="location2"> Option 2</label>
        <input type="checkbox"  id="location2"  value="location2" name="custom2" class="custom-control-input">
   </div>

CODEPEN 链接以显示两个示例

Answer 1

答案似乎不适用于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>

提琴手

https://jsfiddle.net/2cmbq9r0/

编辑：将left:initial更改为left:auto以使其适用于 IE11。

Answer 2

复选框不是实际的<input> （隐藏的）。 这样做是为了在跨浏览器、跨设备上保持一致的样式，因为<input type="checkbox">目前无法做到这一点。

相反，使用<label>的::before伪元素。

因此，您应该在包装器上放置一个自定义类（下面示例中的custom-control-right ）并添加一些覆盖默认值的 CSS：

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

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/> <div style="margin:20px;"> <div class="custom-control custom-checkbox custom-control-inline custom-control-right"> <input type="checkbox" id="location" value="location" name="custom1" class="custom-control-input"> <label class="custom-control-label" for="location"> Option 1</label> </div> <div class="custom-control custom-checkbox custom-control-inline custom-control-right"> <input type="checkbox" id="location2" value="location2" name="custom2" class="custom-control-input"> <label class="custom-control-label" for="location2"> Option 2</label> </div> </div>

注意：您可以替换div.custom-control-right与选择.custom-control-right ，如果这个代码解析加载引导CSS以后。 但是，在 SO 上，链接的资源是在 CSS 面板中的代码之后加载的，我不得不过度限定选择器才能使其工作。

Answer 3

试试看：小提琴

<div style="margin:20px;">
  <div class="custom-control custom-checkbox custom-control-inline">
    <input type="checkbox" id="location" value="location" name="custom1" class="custom-control-input">
    <label class="custom-control-label" for="location"> Option 1</label>
  </div>

  <div class="custom-control custom-checkbox custom-control-inline">

    <input type="checkbox" id="location2" value="location2" name="custom2" class="custom-control-input">
    <label class="custom-control-label" for="location2"> Option 2</label>
  </div>
</div>

css：

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

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

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