html - 如何在 Bootstrap 3 中将标签移动到复选框的左侧？

Question

有没有办法让复选框的文本位于复选框的左侧？我试了又试，但无法正常工作。

我在用

 <div class="col-xs-4 col-sm-3 col-md-2 col-md-offset-2 everything-checkbox"> 

<div class="checkbox">
    <label>
        <input type="checkbox" class="checkbox style-2 " checked="checked">
        <span>Text goes here</span>
    </label>
</div>

我试过将 span 放在最上面，但这也行不通，然后如果我将其设为空白复选框并将文本放在前面，那么它们就不会对齐。

如有任何帮助，我们将不胜感激。

Answer 1

由于这种样式，Bootstrap 样式会将 checkbox 元素 float 到左侧:

.radio input[type="radio"],
.radio-inline input[type="radio"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
    float: left;
    margin-left: -20px;
}

要解决这个问题，您可以简单地将 pull-right 添加到 input 元素的类中:

<input type="checkbox" id="checkbox1" class="checkbox style-2 pull-right" checked="checked"/>

还值得注意的是，label 元素应该具有与输入元素的 id 属性相匹配的 for 属性，像这样:

<div class="checkbox">
    <label for="checkbox1">
        <span>Text goes here</span>
    </label>
    <input type="checkbox" id="checkbox1" class="checkbox style-2 pull-right" checked="checked"/>
</div>

UPDATED EXAMPLE HERE