如何在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系统，了解不同的变化。

希望这有帮助

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>