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 null和undefined区别分析
Oct 14 Javascript
jquery 图片轮换效果
Jul 29 Javascript
window.dialogArguments 使用说明
Apr 11 Javascript
javascript重复绑定事件造成的后果说明
Mar 02 Javascript
js获取视频时长代码
Apr 10 Javascript
响应式表格之固定表头的简单实现
Aug 26 Javascript
Bootstrap轮播插件使用代码
Oct 11 Javascript
angular4模块中给标签添加背景图的实现方法
Sep 15 Javascript
ES6/JavaScript使用技巧分享
Dec 14 Javascript
Javascript 之封装(Package)
Sep 14 Javascript
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
Dec 02 Vue.js
vue 使用class创建和清除水印的示例代码
Dec 25 Vue.js
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/04/26 PHP
PHP实现通过strace定位故障原因的方法
2018/04/29 PHP
jquery实现心算练习代码
2010/12/06 Javascript
js 实现菜单上下显示附效果图
2013/11/21 Javascript
jQuery的cookie插件实现保存用户登陆信息
2014/04/15 Javascript
js动态创建标签示例代码
2014/06/09 Javascript
javascript关于open.window子页面执行完成后刷新父页面的问题分析
2015/04/27 Javascript
js实现hashtable的赋值、取值、遍历操作实例详解
2016/12/25 Javascript
javascript常用经典算法详解
2017/01/11 Javascript
jQuery ajax请求struts action实现异步刷新
2017/04/19 jQuery
vue组件文档(.md)中如何自动导入示例(.vue)详解
2019/01/25 Javascript
微信小程序实现图片上传
2019/05/23 Javascript
vue-router路由模式详解(小结)
2019/08/26 Javascript
vue 组件内获取actions的response方式
2019/11/08 Javascript
Python框架Flask的基本数据库操作方法分析
2018/07/13 Python
使用Python编写Prometheus监控的方法
2018/10/15 Python
Django通过dwebsocket实现websocket的例子
2019/11/15 Python
基于python检查矩阵计算结果
2020/05/21 Python
pytorch 限制GPU使用效率详解(计算效率)
2020/06/27 Python
python中upper是做什么用的
2020/07/20 Python
Python -m参数原理及使用方法解析
2020/08/21 Python
详解matplotlib中pyplot和面向对象两种绘图模式之间的关系
2021/01/22 Python
基于Html5实现的语音搜索功能
2019/05/13 HTML / CSS
英国著名的药妆网站:Escentual
2016/07/29 全球购物
澳大利亚最超值的自行车之家:Reid Cycles
2019/03/24 全球购物
幼儿园教研活动方案
2014/01/19 职场文书
《蓝色的树叶》教学反思
2014/02/24 职场文书
感恩母亲节活动方案
2014/03/04 职场文书
民族团结演讲稿范文
2014/08/27 职场文书
地理科学专业自荐信
2014/09/01 职场文书
写景作文评语集锦
2014/12/25 职场文书
如何写辞职信
2015/05/13 职场文书
开天辟地观后感
2015/06/09 职场文书
ThinkPHP5和ThinkPHP6的区别
2021/03/31 PHP
C#连接ORACLE出现乱码问题的解决方法
2021/10/05 Oracle
Redis实现短信验证码登录的示例代码
2022/06/14 Redis