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中的私有成员
Sep 18 Javascript
JQUERY复选框CHECKBOX全选,取消全选
Aug 30 Javascript
Jquery实现自定义窗口随意的拖拽
Mar 12 Javascript
jQuery弹出框代码封装DialogHelper
Jan 30 Javascript
JavaScript中实现Map的示例代码
Sep 09 Javascript
jQuery EasyUI实现右键菜单变灰不可用效果
Sep 24 Javascript
快速掌握Node.js环境的安装与运行方法
Feb 16 Javascript
angular-ui-sortable实现可拖拽排序列表
Dec 28 Javascript
ionic2打包android时gradle无法下载的解决方法
Apr 05 Javascript
form表单序列化详解(推荐)
Aug 15 Javascript
详解webpack与SPA实践之开发环境搭建
Dec 18 Javascript
JS操作JSON常用方法(10w阅读)
Dec 06 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正则走开
2008/03/15 PHP
PHP实现定时生成HTML网站首页实例代码
2008/11/20 PHP
php中获取指定IP的物理地址的代码(正则表达式)
2011/06/23 PHP
从零开始学YII2框架(六)高级应用程序模板
2014/08/20 PHP
php动态绑定变量的用法
2015/06/16 PHP
php+ajax无刷新分页实例详解
2015/12/07 PHP
php while循环控制的简单实例
2016/05/30 PHP
laradock环境docker-compose操作详解
2019/07/29 PHP
php实现的证件照换底色功能示例【人像抠图/换背景图】
2020/05/29 PHP
js宝典学习笔记(上)
2007/01/10 Javascript
心扬JS分页函数代码
2010/09/10 Javascript
Js中的onblur和onfocus事件应用介绍
2013/08/27 Javascript
用unescape反编码得出汉字示例
2014/04/24 Javascript
使用plupload自定义参数实现多文件上传
2016/07/19 Javascript
jQuery向父辈遍历的简单方法
2016/09/18 Javascript
Node.js批量给图片加水印的方法
2016/11/15 Javascript
NPM 安装cordova时警告:npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to
2016/12/20 Javascript
js中常用的Math方法总结
2017/01/12 Javascript
vue+高德地图写地图选址组件的方法
2019/05/18 Javascript
基于Vue CSR的微前端实现方案实践
2020/05/27 Javascript
分享8个非常流行的 Python 可视化工具包
2019/06/05 Python
Python安装及Pycharm安装使用教程图解
2019/09/20 Python
Django后台管理系统的图文使用教学
2020/01/20 Python
更新升级python和pip版本后不生效的问题解决
2020/04/17 Python
详解python使用金山词霸的翻译功能(调试工具断点的使用)
2021/01/07 Python
pycharm 使用anaconda为默认环境的操作
2021/02/05 Python
使用python实现学生信息管理系统
2021/02/25 Python
HTML5去掉输入框type为number时的上下箭头的实现方法
2020/01/03 HTML / CSS
英国二手物品交易网站:Preloved
2017/10/06 全球购物
保加利亚服装和鞋类购物网站:Bibloo.bg
2020/11/08 全球购物
初级软件工程师面试题 Junior Software Engineer Interview
2015/02/15 面试题
大型车展策划方案
2014/02/01 职场文书
青安岗事迹材料
2014/05/14 职场文书
旅游与环境专业求职信
2014/06/05 职场文书
《灰雀》教学反思
2016/02/19 职场文书
python图像处理基本操作总结(PIL库、Matplotlib及Numpy)
2021/06/08 Python