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. listview-fading 滚动条样式设置

    fadingEdge-属性用来设置拉滚动条时 ,边框渐变的方向.它有三个属性值可以设置 none:(边框颜色不变) horizontal:(水平方向颜色变淡) vertical:(垂直方向颜色变淡). ...

  2. elasticsearch java 客户端之action简介

    上一篇介绍了elasticsearch的client结构,client只是一个门面,在每个方法后面都有一个action来承接相应的功能.但是action也并非是真正的功能实现者,它只是一个代理,它的真 ...

  3. C#解决关闭多线程的form主窗体时抛出ObjectDisposedException 异常

    一.现象: 我在主窗体新建线程,使用子线程来处理接收到的数据,并且更新窗体显示内容,但关闭主窗体程序之后就程序就报错,如下所示: 二.分析问题: 由于新建线程的处理函数里边是一直死循环处理数据,虽然窗 ...

  4. BeautifulSoup的高级应用 之 contents children descendants string strings stripped_strings

    继上一节.BeautifulSoup的高级应用 之 find findAll,这一节,主要解说BeautifulSoup有关的其它几个重要应用函数. 本篇中,所使用的html为: html_doc = ...

  5. 14.inline与namespace使用

    #include <iostream> using namespace std; namespace all { //inline作用为默认调用 inline namespace V201 ...

  6. docker进入容器的几种方法

    一 启动进入容器指定bash 退出后容器关闭 [root@Centos-node3 ~]# docker run -it centos bash [root@83c6b25aca09 /]# 二 do ...

  7. 1.2 Use Cases中 Stream Processing官网剖析(博主推荐)

    不多说,直接上干货! 一切来源于官网 http://kafka.apache.org/documentation/ Stream Processing 流处理 Many users of Kafka ...

  8. 在CentOS7 开发与部署 asp.net core app笔记

    原文:在CentOS7 开发与部署 asp.net core app笔记 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/lihongzhai/art ...

  9. vb.net structure 定义静态数组

    Const RAS95_MaxEntryName = 256 Const RAS95_MaxDeviceName = 128 Const RAS_MaxDeviceType = 16 Structur ...

  10. java 编程思想-java运算符--曾经不太明确的

    1.java 运算符 主要是逻辑运算符和按位运算符;移位运算符-name tecmint.txt 逻辑运算符:And(&&) ; OR(||);Not(!) 按位运算符:And(&am ...