将标签与 Bootstrap Toggle 左侧对齐

Answer 1

或者，如果您不是特别需要标签标签，您可以使用跨度。

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

您应该使用 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>

Answer 4

默认情况下，Bootstrap 将

float: left

添加到

.form-check-input

只需用

float: none

覆盖它并在 html 中的输入之前放置标签。

Answer 5

• 交换标签和输入
• 为容器div设置

  style="display:contents"

• 设置

  style="float:none;margin-left:0.5rem"

  输入

Answer 6

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

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