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之旅 对象的原型链之由来
Aug 25 Javascript
JavaScript 放大镜 放大倍率和视窗尺寸
May 09 Javascript
jQuery EasyUI API 中文文档 - Spinner微调器使用
Oct 21 Javascript
一个JQuery操作Table的代码分享
Mar 30 Javascript
extjs每个组件要设置唯一的ID否则会出错
Jun 15 Javascript
js防止DIV布局滚动时闪动的解决方法
Oct 30 Javascript
node+express+ejs制作简单页面上手指南
Nov 26 Javascript
js改变透明度实现轮播图的算法
Aug 24 Javascript
前端设计师们最常用的JS代码汇总
Sep 25 Javascript
从零开始学习Node.js系列教程四:多页面实现数学运算的client端和server端示例
Apr 13 Javascript
JS基于封装函数实现的表格分页完整示例
Jun 26 Javascript
Javascript实现一朵从含苞到绽放的玫瑰
Mar 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 验证身份证是否合法的函数
2017/02/09 PHP
数组任意位置插入元素,删除特定元素的实例
2017/03/02 PHP
ubutu 16.04环境下,PHP与mysql数据库,网页登录验证实例讲解
2017/07/20 PHP
PHP实现QQ、微信和支付宝三合一收款码实例代码
2018/02/19 PHP
JavaScript为对象原型prototype添加属性的两种方式
2010/08/01 Javascript
PHP 与 js的通信(via ajax,json)
2010/11/16 Javascript
ie8 不支持new Date(2012-11-10)问题的解决方法
2013/07/31 Javascript
30个经典的jQuery代码开发技巧
2014/12/15 Javascript
JavaScript实现自动对页面上敏感词进行屏蔽的方法
2015/07/27 Javascript
jquery带动画效果幻灯片特效代码
2015/08/27 Javascript
jQuery超简单选项卡完整实例
2015/09/26 Javascript
基于jquery实现智能提示控件intellSeach.js
2016/03/17 Javascript
使用JavaScript判断手机浏览器是横屏还是竖屏问题
2016/08/02 Javascript
在localStorage中存储对象数组并读取的方法
2016/09/24 Javascript
JS实现复选框的全选和批量删除功能
2017/04/05 Javascript
详解vue跨组件通信的几种方法
2017/06/15 Javascript
Express+Nodejs 下的登录拦截实现代码
2017/07/01 NodeJs
浅谈Koa2框架利用CORS完成跨域ajax请求
2018/03/06 Javascript
Vue项目中如何使用Axios封装http请求详解
2019/10/23 Javascript
python使用pymysql实现操作mysql
2016/09/13 Python
Python键盘输入转换为列表的实例
2018/06/23 Python
深入浅析Python2.x和3.x版本的主要区别
2018/11/30 Python
python 调用有道api接口的方法
2019/01/03 Python
Python实现微信自动好友验证,自动回复,发送群聊链接方法
2019/02/21 Python
Python实现的插入排序,冒泡排序,快速排序,选择排序算法示例
2019/05/04 Python
Python virtualenv虚拟环境实现过程解析
2020/04/18 Python
django admin 根据choice字段选择的不同来显示不同的页面方式
2020/05/13 Python
科技开发中心办公室主任岗位责任制
2014/02/10 职场文书
电厂职工自我鉴定
2014/02/20 职场文书
实习推荐信
2014/05/10 职场文书
安全宣传标语
2014/06/10 职场文书
公司年底活动方案
2014/08/17 职场文书
募捐感谢信
2015/01/22 职场文书
实习介绍信范文
2015/05/05 职场文书
2015小学师德工作总结
2015/07/21 职场文书
详解Js模块化的作用原理和方案
2021/04/29 Javascript