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

How can I move a label to the left of a checkbox in Bootstrap 3?

提问by Joshua Tall Guy

Is there anyway to get the text of a checkbox to be on the left side of the checkbox? I have tried and tried but cant get it working.

无论如何要让复选框的文本位于复选框的左侧？我已经尝试并尝试过，但无法使其正常工作。

I'm using

我正在使用

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

I have tried putting the span on top and that also doesn't work, Then if I make it a blank checkbox and just put text in front then they don't line up.

我曾尝试将跨度放在顶部，但这也不起作用，然后如果我将其设为空白复选框并仅将文本放在前面，则它们不会对齐。

any help would be really appreciated.

任何帮助将非常感激。

回答by Josh Crozier

Bootstrap styling will float the checkboxelements to the left because of this styling:

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

To solve this, you could simply add pull-rightto the inputelement's class:

为了解决这个问题，你可以简单地添加pull-right到input元素的类中：

<input type="checkbox" id="checkbox1" class="checkbox style-2 pull-right" checked="checked"/>

It's also worth noting that a labelelement shouldhave a forattribute matching the input element's idattribute, like this:

还值得注意的是，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>

UPDATED EXAMPLE HERE

此处更新示例

回答by Joshua Tall Guy

This should do it! JSFiddle

这个应该可以！ 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>   

回答by mp31415

How about this (note left-checkboxclass):

这个怎么样（笔记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>

with css

用CSS

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

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

Looks fine to me.

对我来说看起来不错。

回答by Jürgen Peter Jerry

I am always looking for simple solutions first. A KISS solution is:

我总是首先寻找简单的解决方案。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>

回答by Sergey Nudnov

There are 2 things to correct to have Bootstrap 3 checkbox to the right of label text:

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

• margin-left: -20pxfor checkbox
• padding-left: 20pxfor label

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

Checkbox's size is 12.8px.

复选框的大小是 12.8px。

So our new values should be:

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

• for checkbox: margin-left: 7.2px
• for label: padding-right: 20px

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

Here is an example:

下面是一个例子：

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