ruby-on-rails-3 - 如何在 Twitter Bootstrap 中制作下拉选择表单

Question

他们为常规输入文本表单提供了示例标记：

<form class="form-horizontal">
  <fieldset>
    <legend>Legend text</legend>
    <div class="control-group">
      <label class="control-label" for="input01">Text input</label>
      <div class="controls">
        <input type="text" class="input-xlarge" id="input01">
        <p class="help-block">Supporting help text</p>
      </div>
    </div>
  </fieldset>
</form>

但我怎么能得到类似的东西

对标记如何查找选择列表有点困惑。谢谢！

Answer 1

引导程序 2.3.2：

<form class="form-horizontal">
    <fieldset>          
        <div class="control-group">
            <label class="control-label">Select:</label>
            <div class="controls">
                <select>
                    <option value="1">Option 1</option>
                    <option value="2">Option 2</option>
                    <option value="3">Option 3</option>
                </select>
            </div>
        </div>
    </fieldset>
</form>

引导程序 3.x：

<form role="form" class="form-horizontal">
    <fieldset>
      <div class="form-group">
        <label class="col-sm-2 control-label">Select:</label>
        <div class="col-sm-3">
            <select class="form-control">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select>
        </div>
      </div>
    </fieldset>
</form>

col-sm-2并col-sm-3为您定义宽度可以相应地更改。查看 Bootstrap 站点上的 Grid 系统以了解不同的变化。

希望这可以帮助

Answer 2

Lodder 的答案对于 Bootstrap 2.x 是正确的，但它不适用于 Bootstrap 3。这将适用于 Bootstrap 3：

<form class="form-horizontal">
    <fieldset>          
        <div class="form-group">
            <label class="control-label col-lg-2">Select:</label>
            <div class="col-lg-3">
                <select class="form-control">
                    <option value="1">Option 1</option>
                    <option value="2">Option 2</option>
                    <option value="3">Option 3</option>
                </select>
            </div>
        </div>
    </fieldset>
</form>

Answer 3

并且毫无价值地工作 - Bootstrap 3。

<form class="form-horizontal">
    <fieldset>          
        <div class="form-group">
            <label class="control-label col-lg-2">Select:</label>
            <div class="col-lg-3">
                <select class="form-control">
                    <option>Option 1</option>
                    <option>Option 2</option>
                    <option>Option 3</option>
                </select>
            </div>
        </div>
    </fieldset>
</form>