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 相关文章推荐
DHTML Slide Show script图片轮换
Mar 03 Javascript
网络之美 JavaScript中Get和Set访问器的实现代码
Sep 19 Javascript
Mac/Windows下如何安装Node.js
Nov 22 Javascript
Node.js中对通用模块的封装方法
Jun 06 Javascript
JavaScript转换与解析JSON方法实例详解
Nov 24 Javascript
JavaScript中的prototype原型学习指南
May 09 Javascript
jQuery的ajax下载blob文件
Jul 21 Javascript
浅谈JavaScript中的this指针和引用知识
Aug 05 Javascript
微信小程序tabbar不显示解决办法
Jun 08 Javascript
React应用中使用Bootstrap的方法
Aug 15 Javascript
ES6常用小技巧总结【去重、交换、合并、反转、迭代、计算等】
Dec 21 Javascript
Javascript如何实现双指控制图片功能
Feb 25 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
全国FM电台频率大全 - 15 山东省
2020/03/11 无线电
memcache命令启动参数中文解释
2014/01/13 PHP
php简单的留言板与回复功能具体实现
2014/02/19 PHP
PHP设计模式之适配器模式代码实例
2015/05/11 PHP
js removeChild 障眼法 可能出现的错误
2009/10/06 Javascript
javascript删除数组重复元素的方法汇总
2015/06/24 Javascript
javascript实现多栏闭合展开式广告位菜单效果实例
2015/08/05 Javascript
JS+html5制作简单音乐播放器
2020/09/13 Javascript
微信小程序调用PHP后台接口 解析纯html文本
2017/06/13 Javascript
基于ES6 Array.of的用法(实例讲解)
2017/09/05 Javascript
jQuery简单实现对数组去重及排序操作实例
2017/10/31 jQuery
详解封装基础的angular4的request请求方法
2018/06/05 Javascript
Node.js中读取TXT文件内容fs.readFile()用法
2018/10/10 Javascript
深入理解NodeJS 多进程和集群
2018/10/17 NodeJs
微信小程序实现锚点功能
2019/11/20 Javascript
[06:45]2018DOTA2亚洲邀请赛 4.5 SOLO赛 Sccc vs Maybe
2018/04/06 DOTA
Python使用MySQLdb for Python操作数据库教程
2014/10/11 Python
python通过pil模块将raw图片转换成png图片的方法
2015/03/16 Python
Python中 Lambda表达式全面解析
2016/11/28 Python
详解Python list 与 NumPy.ndarry 切片之间的对比
2017/07/24 Python
对pandas中to_dict的用法详解
2018/06/05 Python
python 统计列表中不同元素的数量方法
2018/06/29 Python
python使用matplotlib画饼状图
2018/09/25 Python
Python安装pycurl失败的解决方法
2018/10/15 Python
基于PyQt4和PySide实现输入对话框效果
2019/02/27 Python
Python 一键获取百度网盘提取码的方法
2019/08/01 Python
使用python将excel数据导入数据库过程详解
2019/08/27 Python
Python基于codecs模块实现文件读写案例解析
2020/05/11 Python
Pytorch通过保存为ONNX模型转TensorRT5的实现
2020/05/25 Python
Python存储读取HDF5文件代码解析
2020/11/25 Python
一些高难度的SQL面试题
2016/11/29 面试题
秸秆管理实施方案
2014/03/15 职场文书
李敖北大演讲稿
2014/05/24 职场文书
教师批评与自我批评材料
2014/10/16 职场文书
街道党风廉政建设调研报告
2015/01/01 职场文书
python实现会员信息管理系统(List)
2022/03/18 Python