360SDN.COM

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

来源:  2018-09-14 15:50:23    评论:0点击:

来源:https://blog.csdn.net/u010884130/article/details/49719265

        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>
为您推荐

友情链接 |九搜汽车网 |手机ok生活信息网|ok生活信息网|ok微生活
 Powered by www.360SDN.COM   京ICP备11022651号-4 © 2012-2016 版权