web-dev-qa-db-ja.com

インラインラジオ/チェックボックスとヘルプブロック要素をTwitterのBootstrap 3

数日前 Twitter Bootstrap 3 RC1がリリースされました そして私は個人的なプロジェクトでそれを使い始めました。

いくつかのインラインラジオチェックボックスグループを含む水平フォームがありますが、これらの要素の水平方向の配置が等しくありません。

enter image description here

質問1：なぜchromeはラベルと同じ行にhelp-block要素を表示しないのですか？

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

編集：

また、小さな画面でのこのマークアップは、「ドロップされたヘルプブロック要素」を生成します。私のマークアップには問題があると思いますが、何が悪いのかわかりません。

Small device

formstwitter-bootstraptwitter-bootstrap-3
12
edigu

あなたのマークアップは一見有効なようです。あなたの質問について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 も参照してください。 「col-lg-1」スタックは992ピクセル未満です。画面の幅が992ピクセルを超える場合。 divの幅は8.333％（100/12）でした。フォーム制御クラスは、入力タグの幅を100％に設定します。 992pxの下には、「col-lg-1」の定義がなく、入力の幅が100％になり、入力は100％の幅で表示されます。

スタックしないcol- *プレフィックスを使用してみてください（または他のCSSを使用して幅を設定してください）

Chromeの動作はまったく異なりません。992pxを超えると、FFとChromeの両方でこれが見つかります。 Forms in Twitter's Bootstrap3

2番目の質問の解決策はまだ見つかりませんでした。

質問2：ラベルのパディングトップは9pxです：

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

.radio-inlineにはパディングがないため、以下のコードをcssに追加します。

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

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

6
Bass Jobsen