Html 将标签与引导开关左侧对齐

我使用引导切换创建如下开关：

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

向右切换文本
向左切换文本

有没有办法将标签移到开关的左侧？我试着把文本放在输入之前，但不太合适

---

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

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

向右切换文本
向左切换文本

这将防止按钮切换在文本上重叠

---

此处：

引导切换css似乎有一个左边距：-20px

只需将自定义类添加到所需的左标签，如下所示

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

这将保持结构引导切换预期，以防它们绑定了样式，例如：

label input {
  // some input targeted styling
}

---

或者如果您不特别需要标签标签，可以使用span

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

向右切换文本
向左切换文本

---

您应该使用引导

容器流体

包装器来实现效果

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

向右切换文本
向左切换文本

---

注意：OP正在使用引导切换。虽然您是正确的，但请谨慎，因为库建议使用所提供的结构。如果框架CSS使用的是像

标签输入{Some style}

@Illdapt aahh.这样的分类，这个答案可能会破坏框架CSS。。错过了插件的使用。但是，仍然看到该插件的css表，没有样式应用于元素的标签部分。此外，应用所有样式的div完全位于标签内容之外。所以，据我所知，它并没有破坏任何CSS样式。它应该很好地使用。这可能会产生所需的输出，但我们可以放心地假设该项目已经使用

容器

或

容器流体

进行总体布局。考虑到这一点。。。嵌套容器包装器是Bootstrap的开发人员在Bootstrap 3.x中特别反对的事情。@RobertC问题中没有这样的规定，我相信他是在尝试创建一些随机开关。