twitter-bootstrap - 如何在 Bootstrap 表单中的一行内联选择上方有文本

Question

我一直在尝试重新创建一个看起来像这样的搜索表单：

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

它的顶部有一个搜索栏，下面有多个 SELECT。此外，每个 SELECT 上的标签都在上方而不是下方。

我知道在 Bootstrap 中你可以像这样添加标签：

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

但是如何在一行内联选择上方添加文本？

有人可以帮忙吗？我正在使用引导程序。

提前致谢！

Answer 1

只需将每个标签放置在 spanX div 中并选择，然后将 spanX div 放置在 row 容器中。

三列的示例：

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

看起来像这样：