Boxing left leveling flag in horizontal form

Question

I am using Bootstrap 3.3.7. I have a horizontal form with a label without labels, for example:

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

I created a demo version of Bootply here .

The problem is that the checkbox is centered. I wanted it to be left aligned, so the left edge aligns with the left edge of the text inputs above it.

How to do it?

I tried:

• Adding a class text-leftto a div that contains a checkbox (result: no effect).
• Removing grid width specifiers from the div checkbox (result: it just ends on the next line).
• Attaching a flag to a tag label, wild hunch after reading this message (result: it disappears).
• divs (: , 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-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>

Answer 3

id LiveOnBootplay

   input#field3 {
     width: auto;
    }