Bootstrap左对齐复选框以水平形式

Question

我正在使用Bootstrap 3.3.7.我有一个带有无标签复选框的水平表单,如下所示:

<div class="container-fluid" style="max-width:600px">
  <form class="form-horizontal">
    <div class="form-group">
      <label class="control-label col-sm-2" for="field1">Field 1:</label>
      <div class="col-sm-8">
        <input class="form-control" type="text" id="field1"/>
      </div>
    </div>
    <div class="form-group">
      <label class="control-label col-sm-2" for="field2">Field 2:</label>
      <div class="col-sm-8">
        <input class="form-control" type="text" id="field2"/>
      </div>
    </div>
    <div class="form-group">
      <label class="control-label col-sm-2" for="field3">Field 3:</label>
      <div class="col-sm-8">
        <!-- HERE IS THE CHECKBOX: -->
        <input class="form-control" type="checkbox" id="field3"/>
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-offset-2 col-sm-8">
        <button class="btn btn-default btn-primary" type="submit">Apply Changes</button>
      </div>
    </div>
  </form>
</div>

我在这里创建了一个Bootply演示.

问题是复选框居中.我希望它左对齐,因此左边缘与其上方文本输入的左边缘对齐.

我怎么做？

我试过了:

• 将类添加text-left到包含复选框的div(结果:无效果).
• 从复选框div中删除网格宽度说明符(结果:它最终在下一行).
• 将label标签中的复选框输入括起来,读完这篇文章后就会疯狂猜测(结果:它会消失).
• 随机手动挥动div的重新排列(结果:精神压碎,git结账以恢复变化).

我没有想法.

Answer 1

你可以在复选框中添加一个类吗？试试这个:

<input class="form-control move-left" type="checkbox" id="field3">

.move-left {
    width: auto;
    box-shadow: none;
  }

演示:http://www.bootply.com/At8YVfnm5F

根据gyre的评论更新.

Answer 2

尝试将包含复选框的 div 的类从col-sm-8to更改为，然后向输入元素col-sm-1添加一个类。checkbox-inline

演示： http: //www.bootply.com/kjF1gVtWDC

<div class="col-sm-1">
  <!-- HERE IS THE CHECKBOX: -->
  <input class="form-control checkbox-inline" type="checkbox" id="field3" />
</div>

Answer 3

您可以更改输入ID LiveOnBootplay的初始宽度或自动宽度

   input#field3 {
     width: auto;
    }