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 相关文章推荐
javascript 函数速查表
Feb 07 Javascript
js实现单击图片放大图片的方法
Feb 17 Javascript
在Python中使用glob模块查找文件路径的方法
Jun 17 Javascript
JavaScript 性能优化小结
Oct 12 Javascript
详解JavaScript基于面向对象之创建对象(1)
Dec 10 Javascript
JQuery日期插件datepicker的使用方法
Mar 03 Javascript
关于微信jssdk实现多图片上传的一点心得分享
Dec 13 Javascript
bootstrap PrintThis打印插件使用详解
Feb 20 Javascript
基于require.js的使用(实例讲解)
Sep 07 Javascript
vue的toast弹窗组件实例详解
May 14 Javascript
微信小程序实现点击图片旋转180度并且弹出下拉列表
Nov 27 Javascript
微信小程序用户授权最佳实践指南
May 08 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
无线电广播的开始
2002/01/30 无线电
php生成随机密码的几种方法
2011/01/17 PHP
PHP中变量引用与变量销毁机制分析
2014/11/15 PHP
php实现通过soap调用.Net的WebService asmx文件
2017/02/27 PHP
在JavaScript中通过URL传递汉字的方法
2007/04/09 Javascript
实现超用户体验 table排序javascript实现代码
2009/06/22 Javascript
jQuery实现鼠标滑过遮罩并高亮显示效果
2013/07/16 Javascript
JS中引用百度地图并将百度地图的logo和信息去掉
2013/09/29 Javascript
收集json解析的四种方法分享
2014/01/17 Javascript
ES6中的箭头函数实例详解
2017/04/06 Javascript
Vue中使用vux的配置详解
2017/05/05 Javascript
浅谈Angularjs中不同类型的双向数据绑定
2018/07/16 Javascript
微信小程序 确认框的实现(附代码)
2019/07/23 Javascript
详解为element-ui的Select和Cascader添加弹层底部操作按钮
2020/02/07 Javascript
JavaScript中Object、map、weakmap的区别分析
2020/12/15 Javascript
[09:40]DAC2018 4.5 SOLO赛 MidOne vs Miracle
2018/04/06 DOTA
在Python中处理日期和时间的基本知识点整理汇总
2015/05/22 Python
python select.select模块通信全过程解析
2017/09/20 Python
pandas 将list切分后存入DataFrame中的实例
2018/07/03 Python
python爬虫---requests库的用法详解
2020/09/28 Python
详解anaconda安装步骤
2020/11/23 Python
详解java调用python的几种用法(看这篇就够了)
2020/12/10 Python
python 多线程爬取壁纸网站的示例
2021/02/20 Python
HTML5拖放API实现拖放排序的实例代码
2017/05/11 HTML / CSS
HTML5基于flash实现播放RTMP协议视频的示例代码
2020/12/04 HTML / CSS
加拿大时尚潮流大码女装购物网站:Addition Elle
2018/04/02 全球购物
英语专业应届生求职信范文
2013/11/15 职场文书
建筑行业的大学生自我评价
2013/12/08 职场文书
超市端午节活动方案
2014/01/23 职场文书
煤矿安全生产责任书
2014/04/15 职场文书
2014年纪检监察工作总结
2014/11/11 职场文书
入党转正申请报告
2015/05/15 职场文书
离职证明格式样本
2015/06/12 职场文书
学法用法心得体会(2016推荐篇)
2016/01/21 职场文书
《最后一头战象》教学反思
2016/02/16 职场文书
详解MySQL主从复制及读写分离
2021/05/07 MySQL