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 checkout 恢复更改）。

我没主意了。

原文由 Jason C 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 的评论 更新。

原文由 sol 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可以更改输入 id 的宽度 initial 或 auto LiveOnBootplay

    input#field3 {
     width: auto;
    }

原文由 Baezid Mostafa 发布，翻译遵循 CC BY-SA 3.0 许可协议