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


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

bootstrap如何把表单select input button弄在一行的更多相关文章

  1. javascript实现的动态添加表单元素input,button等(appendChild)

    写一个小系统时,需要动态添加表单元素,按自己的实现方法写了这篇教程! 我想各位在很多网站上都看到过类似的效果! 1.先用document.createElement方法创建一个input元素! 代码如 ...

  2. Bootstrap<基础六> 表单

    Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单. 表单布局 Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) 内联表单 水平表单 垂直或基本表单 ...

  3. bootstrap+jQuery.validate表单校验

    谈谈表单校验 这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登 ...

  4. ajax form表单提交 input file中的文件

    ajax form表单提交 input file中的文件 现今的主流浏览器由于ajax提交form表单无法把文件类型数据提交到后台,供后台处理,可是开发中由于某些原因又不得不用ajax提交文件, 为了 ...

  5. Bootstrap内联表单

    有时候我们需要将表单的控件都在一行内显示,就需要将表单控件设置成内联块元素(display:inline-block). 在Bootstrap框架中实现这样的表单效果是轻而易举的,你只需要在<f ...

  6. HTML表单之input元素的23种type类型

    摘自:http://www.cnblogs.com/xiaohuochai/p/5179909.html 了解HTML表单之input元素的23种type类型 随着HTML5的出现,input元素新增 ...

  7. 表单里的button默认是submit类型

    今天很坑爹,周六一大早加班开始码代码,本来想做数据加密测试,于是乎用tp框架搭建了一个应用环境,二话不说,开始码码. 但,今天一大早就栽坑!直到同事喊吃饭还在坑里出不来!吃完饭继续码,最后码的我想哭o ...

  8. bootstrap上传表单的时候上传的数据默认是0 一定要小心

    bootstrap上传表单的时候上传的数据默认是0 一定要小心

  9. form表单下的button按钮会自动提交表单的问题

    form表单下的button按钮会自动提交表单的问题 2017年01月05日 18:02:44 蓝色水 阅读数:18012更多 个人分类: asp.net   form表单下的按钮在没有指定type类 ...

随机推荐

  1. Day3晚笔记

    DEV C++扩展栈空间 -Wl,--stack=64000000000 带权二分图匹配 建一个超级源点S,超级汇点T 把左边的点的点权作为权值,连一条S到左边的点的边 把右边的点的点权作为权值,连一 ...

  2. CF1009F Dominant Indices(树上DSU/长链剖分)

    题目大意: 就是给你一棵以1为根的树,询问每一个节点的子树内节点数最多的深度(相对于这个子树根而言)若有多解,输出最小的. 解题思路: 这道题用树链剖分,两种思路: 1.树上DSU 首先想一下最暴力的 ...

  3. C语言之函数指针、回调函数的使用

    一.背景 首先看下如下代码,这个定义是放在头文件的,在程序中tCdrvCallbackFkt也定义了另一个变量,而且括号后面还跟定义了几个变量,不理解这个定义. typedef void (PUBLI ...

  4. Binary Search Algorithm

    二分查找代码: //============================================================================ // Name : Bin ...

  5. 前端面试题(计算机网络/http/https)

    (前端面试题大全,持续更新) 输入url的一系列过程 http缓存(缓存生效的情况),拓展下 get与post的异同,POST一般可以发送什么类型的文件 jsonp有什么不好的地方 http请求头(h ...

  6. Python画图参数设置

    https://blog.csdn.net/qiu931110/article/details/68130199

  7. 【2017中国大学生程序设计竞赛 - 网络选拔赛 hdu 6150】Vertex Cover

    [链接]点击打开链接 [题意] 有人写了一个最小点覆盖的贪心算法,然后,让你去hack它. 并且,要求这个算法得到的错误答案,是正确答案的三倍. 让你任意输出hack数据,点数<=500 [题解 ...

  8. ZOJ 1242 Carbon Dating

    UVA昨天上不去,今天一大早起来还是上不去 0.0 于是去ZOJ 这题大意就是半衰期... 取对数用到了换底公式...我都忘了这玩意了T T 上代码... #include<iostream&g ...

  9. Day2:购物车小程序

    一.购物车小程序第一版 #!/usr/bin/env python # -*- coding:utf-8 -*- # Author:Hiuhung Wan product_list = [ (&quo ...

  10. HDU 1556 Color the ball【算法的优化】

    /* 解题思路:每次仅仅求解一開始的第一个数字,让第一个数字加一,最后的一个数字的后面一个数减一.我们能够想想,最后加的时候,就是加上前面一个数出现的次数和自己本身出现的次数. 解题人:lingnic ...