将标签对齐Bootstrap Toggle左侧

Question

我正在使用bootstrap切换来创建这样的开关：

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

Answer 1

您的标签标签应在输入标签之前关闭。

<form>
    <div class="checkbox">
        <label> Toggle Text Right </label>
        <input type="checkbox" data-toggle="toggle" checked="checked" />
    </div>

    <div class="checkbox">
        <label> Toggle Text Left </label>
        <input type="checkbox" data-toggle="toggle" />
    </div>
</form>

这可以防止按钮切换在文本上重叠。

此处：http://jsfiddle.net/sjxd1vpt/4/

Answer 2

看起来bootstrap-toggle css有一个margin-left：-20px;

只需将自定义类添加到所需的左侧标签中即可。

.left .toggle {
  margin-left: 5px;
}

这将保持 Bootstrap-Toggle 结构，以防它们的样式绑定如下：

label input {
  // some input targeted styling
}

http://jsfiddle.net/sjxd1vpt/5/

Answer 3

或者如果您没有特别需要标签标签，则可以使用跨度。

<form>
<div class="checkbox">
    <input type="checkbox" data-toggle="toggle" checked="checked" />
    <span>
        Toggle Text Right
    </span>
</div>

<div class="checkbox">
    <span>
        Toggle Text Left
    </span>
    <input type="checkbox" data-toggle="toggle" />
</div>

Answer 4

您应该使用bootstrap container-fluid包装器来实现此效果。

<form>
<div class="checkbox container-fluid" >
    <label>
        <input type="checkbox" data-toggle="toggle" checked="checked" />
        Toggle Text Right
    </label>
</div>

<div class="checkbox container">
    <label>
        Toggle Text Left

    </label>
    <input type="checkbox" data-toggle="toggle" />
</div>