twitter-bootstrap - Bootstrap 3 下拉选择

Question

我们正在尝试使用 Bootstrap 重新实现我们的注册表单。我们的注册表单包含一个代表公司类型的下拉列表。我已经在网上进行了广泛的搜索，但我没有看到任何表单输入将成为下拉菜单的示例。

Bootstrap 提供了大量与各种操作相关的下拉示例，但我需要的是下拉输入。我想出了两个解决方案:

第一的:

<label>Type of Business</label>
<select class="form-control">
    <option>small</option>
    <option>medium</option>
    <option>large</option>
</select> 

这里有一个问题:尽管框本身的样式正确，但下拉菜单本身没有应用样式。



第二个版本:

<div class="btn-group">
    <button type="button" class="form-control btn btn-default dropdown-toggle" data-toggle="dropdown">
        Select Business type <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li><a href="#">small</a></li>
        <li><a href="#">medium</a></li>
        <li><a href="#">large</a></li>
    </ul>
</div>

这个看起来不错:



但它是一个按钮。选择选项时，我不想执行任何我想要的 Action ，就是更改文本并使用相应的输入字段绑定(bind)选择。

这两种方法似乎都是我行动的错误选择。我拒绝相信 Bootstrap 不包含绑定(bind)到输入字段的简单下拉单选组件。

我错过了什么？请帮忙。

Answer 1

我们刚刚将我们的网站切换到 bootstrap 3，并且我们有一堆表格......这并不有趣，但一旦你掌握了窍门，它就不会太糟糕了。

这是你想要的？ Demo Here

<div class="form-group">
  <label class="control-label col-sm-offset-2 col-sm-2" for="company">Company</label>
  <div class="col-sm-6 col-md-4">
    <select id="company" class="form-control">
      <option>small</option>
      <option>medium</option>
      <option>large</option>
    </select> 
  </div>
</div>