如何在bootstrap中将标签放在复选框的右侧

Question

我一直在尝试很多方法来<input type="checkbox" id="123"/> 在标签前面，但他们之间留下了巨大的差距。 任何解决方法？这是我的HTML：

<div class="row">
    <div class="col-sm-6">
        <div class="input-group input-group-sm">
            <input type="checkbox" id="ProcessingConsultantYN" value="0" />
            <label class="input-group-addon input-group-addon-pireus" aria-describedby="ProcessingConsultantYN" id="lbProcessingConsultant" for="ProcessingConsultantYN">Обработва се от Кредитен Консултант</label>
        </div>
    </div>
</div>

以下是在网站上显示时的外观以及我实际想要解决的问题：

Answer 1

尝试以下代码只需将您的label代码类替换为checkbox-inline。

<div class="row">
  <div class="col-sm-6">
    <div class="input-group input-group-sm">
      <input type="checkbox" id="ProcessingConsultantYN" value="0" />
      <label class="checkbox-inline" aria-describedby="ProcessingConsultantYN" id="lbProcessingConsultant" for="ProcessingConsultantYN">Обработва се от Кредитен Консултант</label>
    </div>
  </div>
</div>

Answer 2

尝试使用此代码。在标签下，代码根据BOOTSTRAP official doc使用您的复选框标记，或者您可以根据需要修改结构。

我只是尝试使用表单控件创建一个选项，您可以按Static control

使用.form-control-static类

<!-- Latest compiled and minified CSS -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <div class="row">
      <div class="col-sm-6">
        <div class="checkbox">
          <label> <input type="checkbox"> Обработва се от Кредитен Консултант </label>
        </div>
        
        <div class="input-group">
          <span class="input-group-addon" id="basic-addon1"><input type="checkbox" id="ProcessingConsultantYN" value="0" /></span>
          <label class="form-control">Обработва се от Кредитен Консултант</label>
        </div>
        
      </div>
    </div>

Answer 3

How to align checkboxes and their labels consistently cross-browsers

label {
  display: block;
  padding-left: 15px;
  text-indent: -15px;
}
input {
  width: 13px;
  height: 13px;
  padding: 0;
  margin:0;
  vertical-align: bottom;
  position: relative;
  top: -1px;
  *overflow: hidden;
}

AS @dfsq表示检查HTML检查器中是否有错误。 检查上面的链接是否有效。这个链接一定能帮到你。 检查jsfiddle

Answer 4

班级pull-left应该足够了。

<div class="row">
  <div class="col-sm-6">
    <div class="input-group input-group-sm">
      <input type="checkbox" id="ProcessingConsultantYN" value="0" />
      <label class="pull-left" aria-describedby="ProcessingConsultantYN" id="lbProcessingConsultant" for="ProcessingConsultantYN">Обработва се от Кредитен Консултант</label>
    </div>
  </div>
</div>