我使用bootstrap toggle创建如下开关:
<form>
<div class="checkbox">
<label>
<input type="checkbox" data-toggle="toggle" checked="checked" />
Toggle Text Right
</label>
</div>
<div class="checkbox">
<label>
Toggle Text Left
<input type="checkbox" data-toggle="toggle" />
</label>
</div>
</form>
有没有办法把标签移到开关的左边?我试过把文本放在输入之前,但它不太合适。
http://jsfiddle.net/sjxd1vpt/2/
5条答案
按热度按时间xxls0lw81#
或者,如果不特别需要label标记,则可以使用范围。
q8l4jmvw2#
引导切换css似乎有一个左边距:-20像素;
只需向所需的左标签添加一个定制类,如下所示。
这将保持Bootstrap-Toggle预期的结构,以防它们绑定了样式,例如:
http://jsfiddle.net/sjxd1vpt/5/
mzsu5hc03#
您应该使用引导
container-fluid
Package 器来实现这种效果。2jcobegt4#
缺省情况下,Bootstrap会将
float: left
添加到.form-check-input
只需使用
float: none
覆盖此设置,并将标签放在html中的输入之前。a1o7rhls5#
label标记应该在input标记之前结束。
这样可以防止按钮切换与文本重叠。
此处为:http://jsfiddle.net/sjxd1vpt/4/