时间戳

首页 > 解决方案 > 在引导程序自定义复选框上将复选框标签向左移动

html - 在引导程序自定义复选框上将复选框标签向左移动

问题描述

我有一个复选框

<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 链接显示两个示例

标签： htmlcsstwitter-bootstrapbootstrap-4

解决方案

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

推荐阅读