解决Bootstrap布局注册表单input标签前增加必填项*提示与input框不在同一行问题
注册表单部分代码如下:
<form id="registForm" class="form-horizontal" action="${pageContext.request.contextPath }/register" method="post" style="margin-top: 5px;">
<div class="form-group">
<label for="username" class="col-sm-2 control-label">用户名</label>
<div class="col-sm-6">
<em style="color: red;">*</em>
<input type="text" class="form-control" id="username" name="username" placeholder="请输入用户名">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">密码</label>
<div class="col-sm-6">
<em style="color: red;">*</em>
<input type="password" class="form-control" id="password" name="password" placeholder="请输入密码">
</div>
</div>
出现的问题是*与input框不在同一水平位置上,如下图示

解决方法:覆盖input标签的class=“form-control”,修改display为“inline”,原来的block会让div前后带上换行符,将width设置为90%(width原来为100%,需在引入bootstrap的css文件后引入自己写的css样式)
display的两个取值

在自己的css文件中修改如下
.form-control {
display: inline;
width: 90%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
修改后的页面,*与input框在同一行,效果如下

解决Bootstrap布局注册表单input标签前增加必填项*提示与input框不在同一行问题的更多相关文章
- 将ECSHOP会员注册页面的Email修改成非必填项
将ECSHOP会员注册页面的Email修改成非必填项 ECSHOP教程/ ecshop教程网(www.ecshop119.com) 2011-07-29 有人说,在后台的 “会员注册项设置 ”里面 ...
- 如何设置织梦cms自定义表单字段为必填项
1.编辑器打开\plus\diy.php2.在40行左右找到此行代码:$dede_fields = empty($dede_fields) ? '' : trim($dede_fields);3.在这 ...
- bootstrap+jQuery.validate表单校验
谈谈表单校验 这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登 ...
- Ruby Rails学习中:注册表单,注册失败,注册成功
接上篇 一. 注册表单 用户资料页面已经可以访问了, 但内容还不完整.下面我们要为网站创建一个注册表单. 1.使用 form_for 注册页面的核心是一个表单, 用于提交注册相关的信息(名字.电子邮件 ...
- Bootstrap<基础六> 表单
Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单. 表单布局 Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) 内联表单 水平表单 垂直或基本表单 ...
- 如何利用WordPress创建自定义注册表单插件
来源:http://www.ido321.com/1031.html 原文:Creating a Custom WordPress Registration Form Plugin 译文:创建一个定制 ...
- UX设计秘诀之注册表单设计,细节决定成败
以下内容由摹客团队翻译整理,仅供学习交流,摹客iDoc是支持智能标注和切图的产品协作设计神器. 说实话,现实生活中,又有多少人会真正喜欢填写表格?显然,并不多.因为填写表单这样的网页或App服务,并非 ...
- JS判定注册表单的几个方式 及 Ajax进行用户名存在判定
最近感觉不赶紧把代码逻辑记一下梳理一下,再做的时候就容易进入"逻辑误区". 有个表单,简单点. <!DOCTYPE html> <!-- 注册表单验证,用户名格式 ...
- ajax 提交 注册表单 到MySQL数据库
今天按照要求,要做一个登陆.注册表单,本来样式做好就行了,本来咱就是干前端的,但让咱自己都没想到的是,不到一个小时竟然都干完了,实在闲的蛋疼,就想到链接数据库玩,遥想当年,毕竟咱也是写过后台的,哪知, ...
随机推荐
- 刷新页面要通过F5
而不是选中地址栏再按enter键,这样可能产生两种问题: 1.地址栏中的URL可能包括你上次提交的参数,你按了enter之后可能导致上次提交的参数重复提交 2.可能导致根本就没有刷新页面,刚才我修改了 ...
- Makefile学习之路——1
编写makefile,不是一个猛子扎进去试着写一个规则并对之调试,而应该先采用面向依赖关系的思考方法勾勒出makefile要表达怎样的依赖关系,这一点尤为重要.通过不断地练习这种思考方法,才可能达到流 ...
- Mybatis generator 自动生成代码
开发项目的时候,表很多,是不可能一点点的自己去写xml ,dao文件的,这里就需要用到代码的自动生成工具了. 第一步:导入jar包,当然,这之前,基本环境,像mybatis,数据库之类的都得搭建好. ...
- 实际应用中的C#加密
在系统的管理员有着实际的应用,对于一个数据库管理系统来说,数据库安全还是挺重要的,所以在存入到数据库的密码通常都是加密的.即使有着hack攻破数据库后,也不会那样的容易的盗取你的账号和密码,这样可以减 ...
- 【C#学习笔记】反射的简单用法
常见的使用反射的场景: 程序在运行时动态地访问类的成员,如获得类的变量.方法. 例如:用反射给本类的变量赋值. public class Student{ public string studentN ...
- HashMap与ConcurrentHashMap的区别<转>
从JDK1.2起,就有了HashMap,正如前一篇文章所说,HashMap不是线程安全的,因此多线程操作时需要格外小心. 在JDK1.5中,伟大的Doug Lea给我们带来了concurrent包,从 ...
- android矩阵具体解释
Matrix.中文里叫矩阵,高等数学里有介绍,在图像处理方面,主要是用于平面的缩放.平移.旋转等操作. 在Android里面,Matrix由9个float值构成.是一个3*3的矩阵. 最好记住.例如以 ...
- PHP注释的艺术——phpDoc规范
用过IDE或看过其他源码的小伙伴们应该都见过类似下面这样的注释 /** * 递归获取所有游戏分类 * @param int $id * @return array */ 看得多了就大概知道了一些规 ...
- 使用Backbone构建精美应用的7条建议
我们在Bizzabo使用Backbone.js已经有两年的时间了.我们从一个小的网页应用为开始,这些小应用是由Backbone驱动的,而且他们看上去非常友好. Backbone天生就不固执己见.你从文 ...
- QThread 的使用方法及函数解析
近日,使用QThread,一些问题百思不得其解,看过大牛的文章,恍然大悟啊. 原文 http://hi.baidu.com/dbzhang800/item/c14c97dd15318d17e1f46f ...