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样式会将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元素应该<{1}}属性与输入元素的for属性匹配，如下所示：

id

UPDATED EXAMPLE HERE

Answer 2

应该这样做！ 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>

Answer 3

这个怎么样（注意<jsp:include/>类）：

left-checkbox

用css

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

对我来说很好。

Answer 4

要纠正2件事，使标签文本右侧的Bootstrap 3复选框：

Non-fat binary /Users/x/demo/build/ios/Debug-iphoneos/Runner.app/Frameworks/App.framework/App is not arm64. Running lipo -info: Non-fat file: /Users/x/demo/build/ios/Debug-iphoneos/Runner.app/Frameworks/App.framework/App is architecture: x86_64 Command /bin/sh failed with exit code 1（复选框）
pod标签

复选框的大小为12.8像素。

所以我们的新值应该是：

对于复选框：margin-left: -20px
对于标签：padding-left: 20px

以下是示例：

margin-left: 7.2px

padding-right: 20px

Answer 5

我一直在寻找简单的解决方案。 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>

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

5 个答案: