Bootstrap gauche de la case à cocher aligner à l'horizontale forme

Je suis en utilisant Bootstrap 3.3.7. J'ai une forme horizontale avec une étiquette de moins de case à cocher, comme ceci:

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

J'ai créé un Bootply démo ici.

Le problème est la case à cocher est centré. Je voulais qu'il soit aligné à gauche, de sorte que le bord gauche est aligné avec le bord gauche du texte les entrées ci-dessus.

Comment dois-je faire?

J'ai essayé:

  • Ajout de la classe de text-left à la div qui contient la case à cocher (résultat: pas d'effet).
  • Retrait de la largeur de la grille des spécificateurs de la case à cocher div (résultat: elle se termine juste en haut sur la ligne suivante).
  • Entourant la case d'entrée dans un label balise, un sauvage suppose qu'après la lecture de ce post (résultat: il disparaît).
  • Aléatoire de la main-wavey réarrangements de divs (résultat: esprit écrasé, git checkout pour annuler les modifications apportées).

Je suis à court d'idées.

OriginalL'auteur Jason C | 2016-12-10