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类 ...
随机推荐
- android notify
notify http://examples.javacodegeeks.com/android/core/ui/notifications/android-notifications-example ...
- JS和安卓 IOS的交互 例子式记录
(function () { var u = navigator.userAgent; var isAndroid = u.indexOf('Android') > -1 || u.indexO ...
- 斜率优化dp练习
1.HDU3507 裸题,有助于理解斜率优化的精髓. dp[i]=min(dp[j]+m+(sum[i]-sum[j])2) 很显然不是单调队列. 根据斜率优化的的定义,就是先设两个决策j,k 什么时 ...
- numpy_basic
一.Numpy是什么 Numerical Python,数值的Python,补充了Python语言所欠缺的数值计算能力. Numpy是其它数据分析及机器学习库的底层库. Numpy完全标准C语言实现, ...
- STM32 之ADC单次转换模式和连续转换模式
一.背景 在STM32中的AD的单通道采样中可以设置成单次转换模式和连续转换模式,如何理解这两个转换模式的区别,通过程序又是怎样实现的? 二.正文 首先理解单次转换模式,即ADC进行单次转换(单样本) ...
- CList 点击表头排序 (1)SortItems函数
点击表头排序整体的思路都是去 CListCtrl类中的方法SortItems去实现 CListCtrl::SortItems的原型是: BOOL SortItems( PFNLVCOMPARE pfn ...
- 【2017中国大学生程序设计竞赛 - 网络选拔赛】A Secret
[链接]http://acm.hdu.edu.cn/showproblem.php?pid=6153 [题意] ,S2中出现的次数与其长度的乘积之和. [题解] 扩展KMP的模板题. 首先,把S2和 ...
- 13.constexpr
#include <iostream> using namespace std; //声明返回值为常量表达式 constexpr int get() { ; return num; } v ...
- 利用formdata对象上传文件时,需要添加的参数
function doUpload() { var formData = new FormData($( "#uploadForm" )[0]); $.ajax({ url: 'h ...
- 前端面试题(VUE)
(前端面试题大全,持续更新) vue:v-model 双向绑定的原理 依赖收集 虚拟DOM的作用 vue@3.0中的preset配置? 父组件A和其子组件B/子组件C,B/C进行通信的方式(怎么通信) ...