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 相关文章推荐
js操作Xml(向服务器发送Xml,处理服务器返回的Xml)(IE下有效)
Jan 30 Javascript
js实现鼠标划过给div加透明度的方法
May 25 Javascript
js模仿php中strtotime()与date()函数实现方法
Aug 11 Javascript
js利用appendChild对标签进行排序的实现方法
Oct 16 Javascript
JS弹性运动实现方法分析
Dec 15 Javascript
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
Jun 02 jQuery
JavaScript实现的前端AES加密解密功能【基于CryptoJS】
Aug 28 Javascript
vue实现双向绑定和依赖收集遇到的坑
Nov 29 Javascript
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
Dec 29 jQuery
迅速了解一下ES10中Object.fromEntries的用法使用
Mar 05 Javascript
解决echarts 一条柱状图显示两个值,类似进度条的问题
Jul 20 Javascript
基于openlayers实现角度测量功能
Sep 28 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抓取、分析国内视频网站的视频信息工具类
2014/04/02 PHP
PHP常用正则表达式集锦
2014/08/17 PHP
php继承中方法重载(覆盖)的应用场合
2015/02/09 PHP
微信支付开发维权通知实例
2016/07/12 PHP
Ajax中的JSON格式与php传输过程全面解析
2017/11/14 PHP
PHP自定义递归函数实现数组转JSON功能【支持GBK编码】
2018/07/17 PHP
PDO::prepare讲解
2019/01/29 PHP
php设计模式之原型模式分析【星际争霸游戏案例】
2020/03/23 PHP
如何使用JS获取IE上传文件路径(IE7,8)
2013/07/08 Javascript
js导出格式化的excel 实例方法
2013/07/17 Javascript
JavaScript如何调试有哪些建议和技巧附五款有用的调试工具
2015/10/28 Javascript
jquery表单验证需要做些什么
2015/11/17 Javascript
Bootstrap布局组件教程之Bootstrap下拉菜单
2016/06/12 Javascript
bootstrapValidator自定验证方法写法
2016/12/01 Javascript
vue基本使用--refs获取组件或元素的实例
2019/11/07 Javascript
[48:41]VP vs VG Supermajor小组赛 B组胜者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
使用Python编写Linux系统守护进程实例
2015/02/03 Python
Python 列表理解及使用方法
2017/10/27 Python
在Django中URL正则表达式匹配的方法
2018/12/20 Python
Python面向对象之类的定义与继承用法示例
2019/01/14 Python
python调用动态链接库的基本过程详解
2019/06/19 Python
解决Django删除migrations文件夹中的文件后出现的异常问题
2019/08/31 Python
python做接口测试的必要性
2019/11/20 Python
Python如何获取Win7,Win10系统缩放大小
2020/01/10 Python
python Yaml、Json、Dict之间的转化
2020/10/19 Python
洛佩桑酒店官方网站:Lopesan Hotels
2019/04/15 全球购物
Expedia瑞典官网:预订度假屋、酒店、汽车租赁、机票等
2021/01/23 全球购物
电脑租赁公司创业计划书
2014/01/08 职场文书
大学生素质拓展活动方案
2014/02/11 职场文书
百货商场楼层班组长竞聘书
2014/03/31 职场文书
质量安全标语
2014/06/07 职场文书
幼儿园开学通知
2015/04/24 职场文书
2015年学校管理工作总结
2015/07/20 职场文书
ORACLE数据库对long类型字段进行模糊匹配的解决思路
2021/04/07 Oracle
为什么MySQL分页用limit会越来越慢
2021/07/25 MySQL
MySQL分库分表详情
2021/09/25 MySQL