如何在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>

我已经尝试将跨度放在顶部而且也不起作用,然后如果我将它设为空白复选框并且只是将文本放在前面那么它们就不会排成一行.

任何帮助将非常感激.

Answer 1

checkbox由于这种样式,Bootstrap样式会将元素浮动到左侧:

.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元素应该具有for与input元素属性匹配的id属性,如下所示:

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

这里有更新的例子