html - Twitter Bootstrap でヘルプテキストを入力の下ではなく上に追加する方法

Question

Twitter Bootstrap を使用してフォームを作成する際に、ヘルプ テキストを入力の下ではなく上に追加するにはどうすればよいですか。「help-block」クラスを使用して入力の上にステートメントを挿入すると、ラベルと入力が整列しなくなります。それを回避する方法はありますか？

Answer 1

help-block クラス要素をコントロールの先頭に追加する

<div class="control-group">
    <label for="prependedInput" class="control-label">Prepended text</label>
    <div class="controls">
        <p class="help-block">Here's some help text</p>
        <div class="input-prepend">
           <input type="text" class="span2" id="prependedInput" size="16">
        </div>
   </div>

追加する代わりに

 <div class="control-group">
    <label for="prependedInput" class="control-label">Prepended text</label>
    <div class="controls">
        <div class="input-prepend">
           <input type="text" class="span2" id="prependedInput" size="16">
        </div>
        <p class="help-block">Here's some help text</p>
   </div>

デモ: http://jsfiddle.net/D2RLR/935/