我有一个复选框
<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>
答案 0 :(得分:3)
此复选框不是实际的<input>
(已隐藏)。这样做是为了始终如一地跨浏览器和跨设备设置其样式,因为<input type="checkbox">
当前无法实现。
相反,使用::before
的{{1}}伪元素。
因此,您应该在包装器上放置一个自定义类(在下面的示例中为<label>
),并添加一些覆盖默认值的CSS:
custom-control-right
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;
}
注意:如果在加载Bootstrap CSS之后 解析了此代码,则可以将<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
。但是,在SO上,链接资源是在CSS面板中的代码之后加载的,为了使它起作用,我不得不对选择器进行过分限定。
答案 1 :(得分:1)
尝试:Fiddle
<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;
}
答案 2 :(得分: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>
JsFiddle
https://jsfiddle.net/2cmbq9r0/
编辑:将left:initial
更改为left:auto
以使其与IE11兼容。