BootStrap表单宽度设置方法


Posted in Javascript onMarch 10, 2017

用bootstrap的栅格“ coll-md- ”命令设置宽度总是不尽人意,有时上下框对不齐,有时上下宽度又不齐,这时建议用“style="width:100px" "

BootStrap表单宽度设置方法

<div class="page-header">
   <form class="form-horizontal" >
     <div class="form-group form-group-lg">
      <label class="col-sm-2 control-label no-padding-right"style="float:left;font-size:1em; font-family:Microsoft YaHei;"for="form-field-userName1">转运联单号</label>
         <div class="col-sm-4">
           <input class="col-xs-12 col-sm-10" type="text" id="mission_id"placeholder="请输入关键字搜索"/>
         </div>
    </div>
   <form>
<div>

2.或者人用style属性

BootStrap表单宽度设置方法

<form class="form-horizontal" >
     <div class="form-group">
      <label class="col-sm-1 control-label no-padding-right"style="width:180px;font-size:1em; font-family:Microsoft YaHei;"for="form-field-userName1">任务单号:</label>
        <div class="col-sm-4">
         <input class="col-xs-12 col-sm-10" type="text" id="form-field-userName1"placeholder="请输入关键字搜索"/>
       </div>
     </div>
</from>

对比可以看出来,使用第二种方法更加整齐些。

本人bootstrap刚入门,只是在做项目时遇到的问题和解决方法写下来,可能有时是错误的,请大家多多指教。如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery EasyUI API 中文文档 - Tree树使用介绍
Nov 19 Javascript
JavaScript 在网页上单击鼠标的地方显示层及关闭层
Dec 30 Javascript
JS实现将人民币金额转换为大写的示例代码
Feb 13 Javascript
JavaScript使用concat连接数组的方法
Apr 06 Javascript
javascript实现判断鼠标的状态
Jul 10 Javascript
jQuery移动端图片上传组件
Jun 12 Javascript
vue开发心得和技巧分享
Oct 27 Javascript
ES6使用export和import实现模块化的方法
Sep 10 Javascript
JS简单数组排序操作示例【sort方法】
May 17 Javascript
node删除、复制文件或文件夹示例代码
Aug 13 Javascript
Vue-CLI与Vuex使用方法实例分析
Jan 06 Javascript
详解 javascript对象创建模式
Oct 30 Javascript
Angular.js基础学习之初始化
Mar 10 #Javascript
js实现返回顶部效果
Mar 10 #Javascript
Vue.directive自定义指令的使用详解
Mar 10 #Javascript
Node.js如何响应Ajax的POST请求并且保存为JSON文件详解
Mar 10 #Javascript
微信小程序 图片加载(本地,网路)实例详解
Mar 10 #Javascript
微信小程序 页面传值详解
Mar 10 #Javascript
详解Vue生命周期的示例
Mar 10 #Javascript
You might like
聊天室php&amp;mysql(三)
2006/10/09 PHP
怎么样可以把 phpinfo()屏蔽掉?
2006/11/24 PHP
PHP与SQL注入攻击[二]
2007/04/17 PHP
PHP获取音频文件的相关信息
2015/06/22 PHP
php生成验证码函数
2015/10/20 PHP
JavaScript转换农历类实现及调用方法
2013/01/27 Javascript
使用js+jquery实现无限极联动
2013/05/23 Javascript
ie下$.getJSON出现问题的解决方法
2014/02/12 Javascript
实现checkbox全选、反选、取消JavaScript小脚本异常
2014/04/10 Javascript
javascript实现的一个随机点名功能
2014/08/26 Javascript
Ajax分页插件Pagination从前台jQuery到后端java总结
2016/07/22 Javascript
JS图片左右无缝隙滚动的实现(兼容IE,Firefox 遵循W3C标准)
2016/09/23 Javascript
原生JavaScript实现精美的淘宝轮播图效果示例【附demo源码下载】
2017/05/27 Javascript
JQuery.dataTables表格插件添加跳转到指定页
2017/06/09 jQuery
JS Testing Properties 判断属性是否在对象里的方法
2017/10/01 Javascript
详解React路由传参方法汇总记录
2020/11/29 Javascript
[02:54]DOTA2亚洲邀请赛 VG战队出场宣传片
2015/02/07 DOTA
[01:50:49]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第三场 1月24日
2021/03/11 DOTA
python 排列组合之itertools
2013/03/20 Python
python访问类中docstring注释的实现方法
2015/05/04 Python
Python爬取网页中的图片(搜狗图片)详解
2017/03/23 Python
pandas.dataframe中根据条件获取元素所在的位置方法(索引)
2018/06/07 Python
python 读取鼠标点击坐标的实例
2018/12/29 Python
常用python爬虫库介绍与简要说明
2020/01/25 Python
如何在python开发工具PyCharm中搭建QtPy环境(教程详解)
2020/02/04 Python
python GUI库图形界面开发之PyQt5状态栏控件QStatusBar详细使用方法实例
2020/02/28 Python
python爬虫beautifulsoup解析html方法
2020/12/07 Python
Python xlwings插入Excel图片的实现方法
2021/02/26 Python
捷克家电和家具购物网站:OKAY.cz
2020/07/23 全球购物
MySQL面试题
2014/01/12 面试题
办公室内勤岗位职责范本
2013/12/09 职场文书
初中学校对照检查材料
2014/08/19 职场文书
民主评议党员自我鉴定
2014/10/21 职场文书
2014年质检工作总结
2014/11/26 职场文书
颐和园导游词
2015/01/30 职场文书
python文件名批量重命名脚本实例代码
2021/04/22 Python