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

原创 2016年05月30日 17:22:57

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

[html] view plain copy
  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遇到的坑

项目需要,需要一个bootstrap框架下的下拉多选控件,比较主流的都会去用bootstrap-select实现,但是当使用ajax请求到数据添加到下拉框时怎么也不显示,查找原因后是得有两步refre...

input与select相结合使用

梨子 苹果 /*ng-init="AppStakeholder=''" 此举是为其附个默认值以方便判断*/     $scope.b= function() {         if ($s...

BootStrap让两个控件在一行显示

参加单位: 主要就是添加form-inline就可以了
  • ao123056
  • ao123056
  • 2016年04月06日 16:21
  • 13403

bootstrap让label和input在一行里

Search

js在指定的table行后添加新行(js实现select数据的填充,添加行,删除行)

无标题文档         body{width:900px; height:600px;margin: 0px auto; }       body,ul,table,li,pre,dd,d...

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

bootstrap很多折叠样式css都已经写好,可以直接用,很方便。但是,如果遇到一些bootstrap文档里面没有的例子,估计很多初学者都懵了,然后会折腾很久也未见得有效。今天主要讲如何把selec...

Bootstrap3 表单-静态控件-纯文本和 label 置于同一行

如果需要在表单中将一行纯文本和 label 元素放置于同一行,为 元素添加 .form-control-static 类即可。 Email ...

bootstrap中form元素在一行显示

按照如图格式来进行设置,保证数据在一行显示。
  • z_j_012
  • z_j_012
  • 2016年12月11日 10:24
  • 1441

form-inline、form-control和form-group

FR:Hunk xu (QQ技术交流群:386476712)

bootstrap-select 默认下拉列表向上

bootstrap-select 默认下拉列表向上
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:bootstrap如何把表单select input button弄在一行
举报原因:
原因补充:

(最多只允许输入30个字)