twitter-bootstrap - Bootstrap フォームでインライン選択の行の上にテキストを表示する方法

Question

次のような SEARCH フォームを再作成しようとしています。

http://www.realestate.com.au/

上部に SEARCH バーがあり、その下に複数の SELECT があるものです。また、各 SELECT のラベルは下ではなく上にあります。

Bootstrap では、次のようにラベルを追加できることを知っています。

<span class="help-block">Some text</span>

しかし、インライン選択行の上にテキストを追加するにはどうすればよいでしょうか。

誰か親切に助けてくれませんか？ブートストラップを使用しています。

前もって感謝します！

Answer 1

各ラベルを配置し、spanX div 内で選択してから、spanX div を行コンテナー内に配置します。

3 つの列の例:

<div class="row">
    <div class="span4">
      <label for="one">Label One</label>
      <select id="one">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
      </select>
    </div>

  <div class="span4">
      <label for="two">Label Two</label>
      <select id="two">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
      </select>
    </div>

    <div class="span4">
       <label for="three">Label Three</label>
      <select id="three">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
      </select>
    </div>

</div>

それは次のようになります。