解决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数据库
今天按照要求,要做一个登陆.注册表单,本来样式做好就行了,本来咱就是干前端的,但让咱自己都没想到的是,不到一个小时竟然都干完了,实在闲的蛋疼,就想到链接数据库玩,遥想当年,毕竟咱也是写过后台的,哪知, ...
随机推荐
- 【WPF/C#】拖拽Image图片控件
需求:使得Image图片控件能够被拖动. 思路:关键是重写Image控件的几个鼠标事件,实现控制. 前台: <Image Source="C:\Users\Administrator\ ...
- 关于Java的Properties类
Properties类 先来学习下Properties类吧. Properties 类表示了一个持久的属性集.Properties 可保存在流中或从流中加载.属性列表中每个键及其对应值都是一个字符串. ...
- 用lua实现ByteArray和ByteArrayVarint
许多 Actionscript 程序员已经从 Flash 转到 Cocos2d-x 了.那么以前的那些超级好用的类库都不见了,只好重新来过. 我利用 Lua 和 lpack 库实现了一套 lua版本的 ...
- HDU 5289 Assignment(多校2015 RMQ 单调(双端)队列)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5289 Problem Description Tom owns a company and he is ...
- MVC出现错误:系统找不到指定文件(异常来自 HRSULT:0x80070002)
vs2013创建Web应用程序MVC出现错误:系统找不到指定文件(异常来自 HRSULT:0x80070002) 查到博客园VS2013新建Web Application时报错Exception fr ...
- java- Servlet-session
Servlet 相关:http://blog.csdn.net/ggGavin/article/category/2134213 Servlet——Session(1)之基础知识 Servlet——S ...
- C/C++-中的sort排序用法
转载于:http://www.cnblogs.com/luorende/p/6121906.htmlSTL中就自带了排序函数sortsort 对给定区间所有元素进行排序 要使用此函数只需用#inclu ...
- sql server merge 的用法
CREATE TABLE tTable ( id INT , f1 VARCHAR(10) , f2 VARCHAR(10) , f3 VARCHAR(10) ) GO INSERT INTO tTa ...
- 16 款最流行的JavaScript 框架
1. jQuery – Javascript框架 jQuery 是最流行的 JavaScript 框架,它简化了HTML 文档遍历.事件处理.动画和Ajax交互.jQuery插件非常之多. 2. Do ...
- 【转】MFC 迅雷七窗体特效,使用DWM实现Aero Glass效果
从Windows Vista开始,Aero Glass效果被应用在了Home Premium以上的系统中(Home Basic不具有该效果).这种效果是由DWM(Desktop Window Mana ...