带有选择标签的引导内联表单答案

【问题标题】：Bootstrap Inline Form with Select Tag带有选择标签的引导内联表单
【发布时间】：2016-01-14 14:13:49
【问题描述】：

我正在尝试使用 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/

【问题讨论】：

this怎么样
嗯，差不多回答了。我不知道为什么我以前没有想到这一点。猜猜我只需要手动修改宽度。非常感谢@Raviteja
谢谢。如果它对你有用，请接受作为答案

标签： html css twitter-bootstrap

【解决方案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

【讨论】：