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 相关文章推荐
Maps Javascript
Jan 22 Javascript
ASP小贴士/ASP Tips javascript tips可以当桌面
Dec 10 Javascript
js prototype截取字符串函数
Apr 01 Javascript
围观tangram js库
Dec 28 Javascript
JS判断当前日期是否大于某个日期的实现代码
Sep 02 Javascript
JQuery中操作Css样式的方法
Feb 12 Javascript
JS函数arguments数组获得实际传参数个数的实现方法
May 28 Javascript
在vue中封装可复用的组件方法
Mar 01 Javascript
vue中的模态对话框组件实现过程
May 01 Javascript
Bootstrap Table实现定时刷新数据的方法
Aug 13 Javascript
Vue中Quill富文本编辑器的使用教程
Sep 21 Javascript
nuxt静态部署打包相对路径操作
Nov 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
SONY ICF-F10中波修复记
2021/03/02 无线电
PHP修改session_id示例代码
2014/01/08 PHP
php支付宝手机网页支付类实例
2015/03/04 PHP
smarty中常用方法实例总结
2015/08/07 PHP
PHP自定义多进制的方法
2016/11/03 PHP
奇妙的js
2007/09/24 Javascript
QUnit jQuery的TDD框架
2010/11/04 Javascript
JQuery中使用Ajax赋值给全局变量异常的解决方法
2014/01/10 Javascript
jQuery中wrapInner()方法用法实例
2015/01/16 Javascript
JS实现漂亮的淡蓝色滑动门效果代码
2015/09/23 Javascript
在 Angular2 中实现自定义校验指令(确认密码)的方法
2017/01/23 Javascript
Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
2017/03/13 Javascript
几个你不知道的技巧助你写出更优雅的vue.js代码
2018/06/11 Javascript
微信小程序动画(Animation)的实现及执行步骤
2018/10/28 Javascript
小程序云开发教程如何使用云函数实现点赞功能
2019/05/18 Javascript
js事件触发操作实例分析
2019/06/21 Javascript
js+canvas实现简单扫雷小游戏
2021/01/22 Javascript
vue 中的 render 函数作用详解
2020/02/28 Javascript
bootstrap-table后端分页功能完整实例
2020/06/01 Javascript
Paypal支付不完全指北
2020/06/04 Javascript
[04:27]DOTA2官方论坛水友赛集锦
2013/09/16 DOTA
[02:40]DOTA2英雄基础教程 先知
2013/11/29 DOTA
[01:10]3.19DOTA2发布会 三代刀塔人第一代
2014/03/25 DOTA
[53:10]Secret vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
python实现读取并显示图片的两种方法
2017/01/13 Python
tensorflow TFRecords文件的生成和读取的方法
2018/02/06 Python
python中必要的名词解释
2019/11/20 Python
python加密解密库cryptography使用openSSL生成的密匙加密解密
2020/02/11 Python
详解python tcp编程
2020/08/24 Python
jupyter notebook远程访问不了的问题解决方法
2021/01/11 Python
详解基于Facecognition+Opencv快速搭建人脸识别及跟踪应用
2021/01/21 Python
任意一块网页内容实现“活”的背景(目前火狐浏览器专有)
2014/05/07 HTML / CSS
安踏广告词改编版
2014/03/21 职场文书
尊老爱幼演讲稿
2014/09/04 职场文书
大学生党员个人剖析材料
2014/10/08 职场文书
交通运输局四风问题对照检查材料思想汇报
2014/10/09 职场文书