如何将标签移动到 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

要在标签文本右侧设置 Bootstrap 3 复选框，需要纠正两件事：

• margin-left: -20px 复选框
• padding-left: 20px 为标签

复选框的大小为 12.8px。

所以我们的新价值观应该是：

• 复选框：margin-left: 7.2px
• 标签：padding-right: 20px

这是一个例子：

.checkbox.checkbox-left-label label,
.checkbox-inline.checkbox-left-label {
  padding-left: unset;
  padding-right: 20px;
}

.checkbox.checkbox-left-label input[type=checkbox],
.checkbox-inline.checkbox-left-label input[type=checkbox] {
  margin-left: 7.2px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <h5>Checkboxes with labels on the left side:</h5>
  <p>
    <div class="checkbox checkbox-left-label">
      <label>Option 1<input type="checkbox" value=""></label>
    </div>
    <div class="checkbox checkbox-left-label">
      <label>Option 2<input type="checkbox" value=""></label>
    </div>
    <div class="checkbox checkbox-left-label disabled">
      <label>Option 3<input type="checkbox" value="" disabled></label>
    </div>
  </p>
</div>
<div class="container">
  <h5>Inline checkboxes with labels on the left side:</h5>
  <p>
    <label class="checkbox-inline checkbox-left-label">Option 1<input type="checkbox" value=""></label>
    <label class="checkbox-inline checkbox-left-label">Option 2<input type="checkbox" value=""></label>
    <label class="checkbox-inline checkbox-left-label disabled">Option 3<input type="checkbox" value="" disabled></label>
  </p>
</div>

Answer 2

我总是首先寻找简单的解决方案。 KISS 解决方案是：

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

Answer 3

这个怎么样（注意left-checkbox类）：

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

用css

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

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

我觉得很好。

Answer 4

由于这种样式，引导样式会将checkbox 元素浮动到左侧：

.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

Answer 5

应该这样做！ JSFiddle

<div class="col-xs-4 col-sm-3 col-md-2 col-md-offset-2 everything-checkbox"> 
<div class="checkbox">
<label>
<span>Text goes here</span>
<input type="checkbox" class="checkbox style-2 " checked="checked">
</label>
</div>