Question

我正在尝试使用bootstrap 3创建一个内联表单，该表单将包含文本输入，然后是选择标记和按钮。我把它全部内联，但每个元素的宽度等于它之外的宽度。我正在努力实现类似于AirBnB形式的东西。我是否需要一些自定义CSS或者引导程序是否内置了我不使用的内容？

<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

带选择标记的Bootstrap内联表单

1 个答案: