html - 带选择标签的 Bootstrap 内联表单

Question

我正在尝试使用 bootstrap 3 制作一个内联表单，它将有一个文本输入，然后是一个选择标签和一个按钮。我已经全部内联，但是每个元素的宽度等于它旁边的那个。我正在尝试实现类似于 AirBnB 形式的东西。我需要一些自定义 css 还是 bootstrap 内置了一些我没有使用的东西？

<div class="form-group">
    <div class="input-group">
        <span class="input-group-btn">
            <input type="text" class="form-control" name="search-text" placeholder="Search">
        </span>
        <span class="input-group-btn">
            <select class="form-control" name="args">
                <option>ex</option>
            </select>
        </span>
        <span class="input-group-btn">
            <button type="submit" class="form-control"><span class="glyphicon glyphicon-search"></span></button>
        </span>
    </div>  
</div>  

https://jsfiddle.net/mnn4Lcqb/

Answer 1

这可能有帮助

HTML

<div class="form-group">
  <div class="input-group">
    <span class="input-group-btn">
        <input type="text" class="form-control" name="search-text" placeholder="Search">
    </span>
    <span class="input-group-btn">
        <select class="form-control" name="args">
        <option>ex</option>
        </select>
    </span>
    <span class="input-group-btn">
        <button id="searchbtn" type="submit" class="form-control"><span class="glyphicon glyphicon-search"></span></button>
    </span>
  </div>
</div>

CSS

#searchbtn {
  width: 105px;
  background-color: #ff5a5f;
}

Working Demo