ブートストラップのチェックボックスの右にラベルを付けるには

Question

私はラベルの前に<input type="checkbox" id="123"/> を入れようとたくさんの方法を試みましたが、彼らは自分自身の間に大きなギャップを残しています。 回避策はありますか？ここに私のhtmlだ：

<div class="row"> 
    <div class="col-sm-6"> 
     <div class="input-group input-group-sm"> 
      <input type="checkbox" id="ProcessingConsultantYN" value="0" /> 
      <label class="input-group-addon input-group-addon-pireus" aria-describedby="ProcessingConsultantYN" id="lbProcessingConsultant" for="ProcessingConsultantYN">Обработва се от Кредитен Консултант</label> 
     </div> 
    </div> 
</div> 

ここでは、ウェブサイトと私は実際に修正したい上に表示されているとき、それはどのように見えるかです：

Answer 1

として.form-control-staticクラスを使用することができ、フォームコントロールとオプションを作ろうとしています。

<div class="row"> 
 
    <div class="col-sm-6"> 
 
    <div class="input-group input-group-sm"> 
 
     <input type="checkbox" id="ProcessingConsultantYN" value="0" /> 
 
     <label class="checkbox-inline" aria-describedby="ProcessingConsultantYN" id="lbProcessingConsultant" for="ProcessingConsultantYN">Обработва се от Кредитен Консултант</label> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

は、このコードを試してみてください。ラベルの下にあるタグにBOOTSTRAP official docのようにチェックボックスタグを使用するか、必要に応じて構造を変更することができます。

私は単にあなただけのcheckbox-inlineであなたのlabelタグクラスを置き換えるコードの下に試してみてくださいあたりStatic control

<!-- Latest compiled and minified CSS --> 
 

 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <div class="row"> 
 
     <div class="col-sm-6"> 
 
     <div class="checkbox"> 
 
      <label> <input type="checkbox"> Обработва се от Кредитен Консултант </label> 
 
     </div> 
 
     
 
     <div class="input-group"> 
 
      <span class="input-group-addon" id="basic-addon1"><input type="checkbox" id="ProcessingConsultantYN" value="0" /></span> 
 
      <label class="form-control">Обработва се от Кредитен Консултант</label> 
 
     </div> 
 
     
 
     </div> 
 
    </div>

Answer 3

クラスpull-leftはあなたのために十分です。

<div class="row"> 
 
    <div class="col-sm-6"> 
 
    <div class="input-group input-group-sm"> 
 
     <input type="checkbox" id="ProcessingConsultantYN" value="0" /> 
 
     <label class="pull-left" aria-describedby="ProcessingConsultantYN" id="lbProcessingConsultant" for="ProcessingConsultantYN">Обработва се от Кредитен Консултант</label> 
 
    </div> 
 
    </div> 
 
</div>

Answer 4

How to align checkboxes and their labels consistently cross-browsers

label { 
    display: block; 
    padding-left: 15px; 
    text-indent: -15px; 
} 
input { 
    width: 13px; 
    height: 13px; 
    padding: 0; 
    margin:0; 
    vertical-align: bottom; 
    position: relative; 
    top: -1px; 
    *overflow: hidden; 
} 

@dfsqはHTMLインスペクタで間違ったか何かかどうかを確認言ったように。 上記のリンクが動作しているかどうかを確認してください。このリンクは役立ちます。 チェックjsfiddle