ブートストラップのチェックボックスと同じ行のラベル

Question

チェックボックスとラベルを同じ行に表示できません。適切なブートストラップ方法はthis-

<li>   
<label><input type="radio">Joe made the sugar cookies; Susan decorated them.</label> 
</li> 

のようなラベルタグのチェックボックスをラップすることです。しかし、私は、CMSを使用していますし、それはチェックボックスを作成し、そのようにラベルを付けていない、代わりに彼らはthis-

のように生成され、

<li> 
<input type="radio"> 
<label>She did her best to help him.</label> 
</li> 

この方法の問題は、チェックボックスがラベルと異なる行にあることです。私はディスプレイにラベルを設定することができます：インラインとこれは動作しますが、私のフォームからすべてのマージンが削除され、とてもうまく見えません。

解決策を見つけるのを手伝ってくれる人はいますか？ここでjs fiddle

Answer 1

使用ブートストラップのradio-inlineクラスがある：あなたがBootstrap

を使用して、同じ行にそれを作ることができ、クラス radio-inlineで label内 contentと radio inputをラップ https://jsfiddle.net/xs04fqgo/1/

：

が更新フィドルを参照してください。

Answer 2

あなたはCSSでもう少し作業が必要...ちょうどあなたのための新しいフィドルを作成しました。 Here it is.

li > input { 
    display:inline-block; 
    width:20px; 
} 
label { margin-bottom: 25px; 
    display:inline-block; 
    width:235px; 
}