Bootstrap 3选择嵌入式输入表单

Question

我试图获取输入并选择彼此内联的选项，例如this demo using Bootstrap 2 (dead link)。

按照Bootstrap 3指南，我设法做到这一点：

<div class="container">
    <div class="col-sm-7 pull-right well">
      <form class="form-inline" action="#" method="get">
        <div class="form-group col-sm-5">
          <input class="form-control" type="text" value="" placeholder="Search" name="q">
        </div>
        <div class="form-group col-sm-3">
          <select class="form-control" name="category">
              <option>select</option>
              <option>1</option>
              <option>2</option>
              <option>3</option>
          </select>
        </div>
        <button class="btn btn-primary col-sm-3 pull-right" type="submit">Search</button>
      </form>
    </div>
</div>

它具有响应性，但是如果没有一些讨厌的CSS hacks，就无法附加输入和选择。我发现了很多带有附加按钮的示例，但不适用于select元素。

Answer 1

我想我偶然找到了解决方案。唯一要做的是在<span class="input-group-addon"></span>和<input>之间插入一个空的<select>。

Answer 2

可以使用纯Bootstrap代码完成。

Answer 3

感谢G_money和其他建议，以这种出色的内联下拉输入文本解决方案...这是另一个很好的解决方案。

Answer 4

[它需要添加少量CSS才能使其与Bootstrap 3一起使用：

Answer 5

我似乎也无法在没有黑客的情况下实现这一目标，所以我所做的只是使用下拉菜单代替选择框，然后通过隐藏字段发送信息，就像这样（使用您的代码）：

Answer 6

对旧问题的另一个不同答案。但是，我发现了一个专门针对引导程序的实现，在这里可能会有用。希望这对正在寻找的人有所帮助...

Answer 7

基于spacebean的答案，当用户选择其他项目时，此修改也会更改显示的文本（就像<select>一样：]

Answer 8

这是我没有额外的CSS或jquery的方式：

Answer 9

我知道这有点老，但是我遇到了同样的问题，我的搜索将我带到了这里。我想要两个选择元素和一个按钮全部内联，它们可以在2中工作，但不能在3中工作。我最终将这三个元素包装在<form class="form-inline">...</form>中。这实际上对我来说非常有效。