5

次のように、フォーム要素を並べて、その上にラベル（それぞれの入力要素の先頭に揃えて）を配置したフォームを作成しようとしています。

Label                 Label2
+----------------+    +-------+
+----------------+    +-------+

「Label2」が入力要素とわずかに整列していないため、以下は期待どおりに機能しません。

<div class="controls controls-row">
    <label class="span9"><span>Label</span></label>
    <label class="span2"><span>Label2</span></label>
</div>
<div class="controls controls-row">
    <input type="text" class="span9" />
    <input type="text" class="span2" />
</div>

この回避策のような構造を使用して動作させることができました。

<div class="controls controls-row">
    <div class="span9">
        <label><span>Label</span></label>
    </div>
    <div class="span2">
        <label><span>Label2</span></label>
    </div>
</div>
<div class="controls controls-row">
    <div class="span9">
        <input type="text" class="span12" />
    </div>
    <div class="span2">
        <input type="text" class="span12" />
    </div>
</div>

それで、これはバグである可能性がありますか？Twitter Bootstrapページには、次のように書かれているためです。

グリッド列の同じサイズに一致する入力には、.span1から.span12を使用します。

これが私の問題を再現するJSFiddleです。

4

3 に答える 3

7

おそらく最も簡単な修正は、2つinputの間のHTMLの空白を削除することです。

<input type="text" class="span9" />
<input type="text" class="span2" />

に：

<input type="text" class="span9" /><input type="text" class="span2" />
于 2012-09-19T11:00:48.577 に答える
4

私はグリッドシステムを使用してそれを行うことができました：

<div class="row-fluid">
  <div class="span9">
    <label>First name</label>
    <input name="firstName" class="span12" placeholder="First name" type="text">
  </div>
  <div class="span3">
    <label>Last name</label>
    <input name="lastName" class="span12" placeholder="Last name" type="text">
  </div>
</div>
于 2013-06-20T21:09:55.527 に答える
2

位置がずれている理由は、最初の後に空白が表示されているため<input>です。この空白は、古いブラウザの「機能」のようです。マークアップの同じ行にない限り、<input>直後に他のが続くUnicodeスペース（U + 0020）文字を追加します。<input>

祖先のフォントサイズを0に減らすことができるので、このスペースは表示されません。

.controls.controls-row { font-size: 0; }​
于 2012-09-19T11:17:59.813 に答える