Twitterのブートストラップを使って、インラインラジオ/チェックボックスとヘルプブロック要素を水平に整列させる方法3

Question

ほんの数日前Twitter Bootstrap 3 RC1 releasedと私はちょうど個人的なプロジェクトでそれをプレイし始めました。

私はいくつかのインライン無線チェックボックスグループが、これらの要素の水平方向の配置を含む水平形態を有することは等しくない：

質問1：クロムディスプレイヘルプブロック要素は、上でない理由ラベルと同じ行ですか？

質問2：同じ行のインラインラジオグループをラベルに合わせるにはどうすればよいですか？

質問3：マークアップは有効ですか？これらの問題はマークアップに関連していますか？

マークアップ：

<div class="container"> 
    <form class="form-horizontal"> 

    <div class="form-group"> 
    <label class="col-lg-2 control-label">Weight</label> 
    <div class="col-lg-1"> 
     <input type="text" name="weight" class="form-control" value="20"> 
    </div> 
    <div class="help-block"> grams</div> 
    </div> 

    <div class="form-group"> 
    <label class="col-lg-2 control-label">Full part name</label> 
    <div class="col-lg-6"> 
     <input type="text" name="name" class="form-control" placeholder="Don't use numeric characters.."> 
    </div> 
    </div> 

    <div class="form-group"> 
    <label class="col-lg-2 control-label">Inline radios</label> 
    <div class="col-lg-10"> 
     <label class="radio-inline"> 
     <input type="radio" name="radio"> Hello 
     </label> 
     <label class="radio-inline"> 
     <input type="radio" name="radio"> Other 
     </label> 
     <label class="radio-inline"> 
     <input type="radio" name="radio"> Another 
     </label> 
     <label class="radio-inline"> 
     <input type="radio" name="radio" checked="checked"> Foobar 
     </label> 
    </div> 
    </div> 
</form> 
</div> 

EDIT：

また、小さな画面上でこのマークアップは、 "ドロップヘルプ - ブロック要素" を生成します。私はマークアップに問題があると思いますが、何が間違っているのか分かりません。

Answer 1

あなたのマークアップは一見に有効であると思われます。幅にそう

<div class="col-lg-1"> 
    <input type="text" name="weight" class="form-control" value="20"> 
</div> 

がCOL-LG-1プレフィックスで設定されている

は、以下を参照してください。： https://stackoverflow.com/a/17920693/1596547あなたの質問1.

についてあなたがあなたの入力を設定しています。 "col-lg-1"は992ピクセル以下でスタックします。画面の幅が992ピクセルを超える場合。 divの幅は8.333％（100/12）です。 フォームコントロールクラスは、入力タグの幅を100％に設定します。 992pxの下に「col-lg-1」の定義がないため、入力の100％の幅が生じ、入力は100％の幅で表示されます。

はスタック決してcol- *接頭辞を使用（または幅を設定するために、他のCSSを使用して）私は全然クロームのためのさまざまな行動が見つかりませんでした

にしてください。私はまだあなたの2番目の質問のための解決策を見つけていなかった

：992pxの上に私はFFとChromeの両方でこれを見つけます。

質問2： あなたのラベルから9pxのパディングトップを得た：.radio-インラインパディングを持っていないので、あなたのCSSに以下のコードを追加してください

.form-horizontal .control-label { 
    padding-top: 9px; 
    } 

：

.radio-inline, .checkbox-inline { 
    padding-top: 9px; 
} 

参照：https://github.com/twbs/bootstrap/pull/8967