bootstrap如何把表单select input button弄在一行

来源:互联网 发布:sql server 笛卡尔积 编辑:程序博客网 时间:2024/06/06 15:00

        bootstrap很多折叠样式css都已经写好,可以直接用,很方便。但是,如果遇到一些bootstrap文档里面没有的例子,估计很多初学者都懵了,然后会折腾很久也未见得有效。今天主要讲如何把select input button弄在一行,因为直接用bootstrap的form-control样式会出现换行!只需要解决为何换行即可;form-control有个属性:width:100%,这个是产生换行的原因,所以覆盖form-control的width:100%样式为width:auto;即可。例子如下:

<div class="form-group">    <div class="input-group col-xs-12">        <div class="input-group-btn">            <select name="type" class="form-control" style="width: auto;">                <option value="1">全网</option>                <option value="2">本站</option>            </select>        </div>        <input type="text" name="keyword" id="keyword" class="form-control" placeholder="请您输入关键词">        <span class="input-group-btn">            <button class="btn btn-success" id="search_submit" type="submit">Go</button>        </span>    </div></div>


1 0