bootstrap如何把表单select input button弄在一行
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>
bootstrap如何把表单select input button弄在一行的更多相关文章
- javascript实现的动态添加表单元素input,button等(appendChild)
写一个小系统时,需要动态添加表单元素,按自己的实现方法写了这篇教程! 我想各位在很多网站上都看到过类似的效果! 1.先用document.createElement方法创建一个input元素! 代码如 ...
- Bootstrap<基础六> 表单
Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单. 表单布局 Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) 内联表单 水平表单 垂直或基本表单 ...
- bootstrap+jQuery.validate表单校验
谈谈表单校验 这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登 ...
- ajax form表单提交 input file中的文件
ajax form表单提交 input file中的文件 现今的主流浏览器由于ajax提交form表单无法把文件类型数据提交到后台,供后台处理,可是开发中由于某些原因又不得不用ajax提交文件, 为了 ...
- Bootstrap内联表单
有时候我们需要将表单的控件都在一行内显示,就需要将表单控件设置成内联块元素(display:inline-block). 在Bootstrap框架中实现这样的表单效果是轻而易举的,你只需要在<f ...
- HTML表单之input元素的23种type类型
摘自:http://www.cnblogs.com/xiaohuochai/p/5179909.html 了解HTML表单之input元素的23种type类型 随着HTML5的出现,input元素新增 ...
- 表单里的button默认是submit类型
今天很坑爹,周六一大早加班开始码代码,本来想做数据加密测试,于是乎用tp框架搭建了一个应用环境,二话不说,开始码码. 但,今天一大早就栽坑!直到同事喊吃饭还在坑里出不来!吃完饭继续码,最后码的我想哭o ...
- bootstrap上传表单的时候上传的数据默认是0 一定要小心
bootstrap上传表单的时候上传的数据默认是0 一定要小心
- form表单下的button按钮会自动提交表单的问题
form表单下的button按钮会自动提交表单的问题 2017年01月05日 18:02:44 蓝色水 阅读数:18012更多 个人分类: asp.net form表单下的按钮在没有指定type类 ...
随机推荐
- 3.1 Broker Configs 官网剖析(博主推荐)
不多说,直接上干货! 一切来源于官网 http://kafka.apache.org/documentation/ 3.1 Broker Configs 3.1 broker配置 The essent ...
- golang sync.Mutex
//go func 和主线程之间的关系是并行和竞争关系 package main import ( "fmt" "sync" "time" ...
- Switchover and Failover说明
SWITCHOVER Switchover是有计划的将primary切换为standby,standby切换为primary.在主库结束生产后,备库应用完所有主库archivelog或者redo lo ...
- JS怎么判断数组类型?
1.判断对象的constructor是否指向Array,接着判断特殊的属性length,splice等.[应用的是constructor的定义:返回对象所对应的构造函数.] eg: [].constr ...
- js上传文件(图片)的格式和大小限制
如果你想快速解决这个问题,看本文就够了.查了好多资料,终于解决了,太耗时间了,本文留给给后来者,希望你们工作的更轻松 本文保存为.html文件用浏览器打开即可测试功能 <form id=&quo ...
- python 时间合集 一
**以下内容均为我个人的理解,如果发现错误或者疑问可以联系我共同探讨**#### python中4种时间表示形式:1.格式化时间字符串 2.时间戳 3.时间元祖 4.时间对象- string_time ...
- 【Codeforces Round #453 (Div. 2) B】Coloring a Tree
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 从根节点开始. 显然它是什么颜色.就要改成对应的颜色.(如果上面已经有某个点传了值就不用改 然后往下传值. [代码] #includ ...
- amazeui学习笔记二(进阶开发2)--Web组件简介Web Component
amazeui学习笔记二(进阶开发2)--Web组件简介Web Component 一.总结 1.amaze ui:amaze ui是一个web 组件, 由模板(hbs).样式(LESS).交互(JS ...
- Spark应用程序部署工具Spark Submit
不多说,直接上干货! spark-submit在哪个位置 [spark@master ~]$ cd $SPARK_HOME/bin [spark@master bin]$ pwd /usr/loca ...
- input输入框获得、失去焦点添加事件
onBlur:当输入框失去焦点后 onFocus:当输入框获得焦点后 这两个JavaScript事件是写在html标签中的例如: <input type="text" onB ...