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

是否仍然需要将复选框的文本置于复选框的左侧？我试了又试，但还是没能成功

我正在使用

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

这里有文字

我试着把跨度放在顶部，但这也不起作用，如果我把它设为一个空白复选框，只把文本放在前面，那么它们就不会对齐

任何帮助都将不胜感激。

这就够了

这里有文字

引导样式将使

复选框

元素向左浮动，因为此样式：

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

这个怎么样（注意

左复选框

类）：

---

看起来不错。

我总是先寻找简单的解决方案。 接吻的解决方案是：

<span style="white-space: nowrap;">Do Not Reverse Import 
    <label>
        <input 
            type="checkbox" 
            name="DoNotReverseImport"    
            value="DoNotReverseImport"   
            OnChange = "OffYouGo('DoNotReverseImport');"   
            title = 'Check if old entries appear first in your import'         
        >
    </label>
</span>

不反向导入

将引导3复选框置于标签文本右侧需要更正两件事：

• 左边距：-20px

  用于复选框

• 左侧填充：标签为20px

复选框的大小为12.8px

因此，我们的新价值观应该是：

• 复选框：

  左边距：7.2px

• 对于标签：

  padding right:20px

这里有一个例子：

.checkbox.checkbox-left-label标签，
.checkbox-inline.checkbox-left-label{
左侧填充：未设置；
右边填充：20px；
}
.checkbox.checkbox-left-label输入[type=checkbox]，
.checkbox-inline.checkbox-left-label输入[类型=复选框]{
左边距：7.2px；
}

左侧带有标签的复选框：

选择1
选择2
选择3

左侧带有标签的内联复选框：

选择1
选择2
选择3

但这没有引导样式。是的，我本来会这样想，但如果我这样做，复选框就会消失。对于匹配id，而不是名称，它不适用于当前的引导版本：3.3.7。不过，这不是语义上的。文本在

标签

之外。为什么还要在复选框周围加上一个空标签呢？

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

      <div class="form-group">

        <div class="col-xs-4">
          <div class="checkbox left-checkbox">
            <label>
              Text goes here
            </label>
          </div>
        </div>

        <div class="col-xs-8">
          <div class="checkbox left-checkbox">
            <input type="checkbox">
          </div>
        </div>

      </div>

.left-checkbox label {
    text-align: right;
    float: right;
    font-weight: bold;    
}

.left-checkbox input[type=checkbox] {
    margin-left: 0;
}

<span style="white-space: nowrap;">Do Not Reverse Import 
    <label>
        <input 
            type="checkbox" 
            name="DoNotReverseImport"    
            value="DoNotReverseImport"   
            OnChange = "OffYouGo('DoNotReverseImport');"   
            title = 'Check if old entries appear first in your import'         
        >
    </label>
</span>