如何在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

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

Bootstrap 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系统,了解不同的变化.

希望这可以帮助