如何在 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 放在最上面，但这也行不通，然后如果我将其设为空白复选框并将文本放在前面，那么它们就不会对齐。

任何帮助将非常感激。

原文由 Joshua Tall Guy 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

由于这种样式，Bootstrap 样式会将 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 元素 应该 有一个 for 属性匹配输入元素的 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>

此处更新示例

原文由 Josh Crozier 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

在父级中使用 form-check-prepend div

 <form>
    <div>
      <div class="form-check-prepend">
        <label class="form-input-label" for="checkbox1">
          This is the label for the checkbox
        </label>
        <input
          type="checkbox1"
          class="form-check-input pull-right"
          id="checkbox1"
        />
      </div>
    </div>
  </form>

我目前在我的网站上使用它。我没有在不同的设备和/或浏览器上测试过它。欢迎评论…

原文由 vaconingham 发布，翻译遵循 CC BY-SA 4.0 许可协议