ブートストラップの横のチェックボックスを水平にします

Question

私はブートストラップ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を作成しました：私はこのように、ラベルのないチェックボックスと水平のフォームを持っています。

問題は、チェックボックスが中央に配置されていることです。私はそれを左揃えにしたいので、左端はその上にあるテキスト入力の左端に揃えられます。

どうすればよいですか？

私が試してみました：

• をチェックボックス（結果：効果なし）が含まれているのdivにクラスtext-leftを追加します。
• グリッド幅指定子をチェックボックス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; 
    } 

デモ：GYREさんのコメントどおり更新http://www.bootply.com/At8YVfnm5F

これを試してみてください。

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