水平形式的引导左对齐复选框

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 demo here。

问题是复选框居中。我希望它左对齐，所以左边缘与它上面的文本输入的左边缘对齐。

我该怎么做？

我试过了：

• 将text-left类添加到包含复选框的div（结果：无效）。
• 从复选框 div 中删除网格宽度说明符（结果：它只是在下一行结束）。
• 将复选框输入包含在label 标记中，阅读this post 后的疯狂猜测（结果：它消失了）。
• 随机手动重新排列 div（结果：精神崩溃，git checkout 恢复更改）。

我没有想法。

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

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

   input#field3 {
     width: auto;
    }

Answer 3

尝试将包含复选框的 div 的类从 col-sm-8 更改为 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>