解决Bootstrap布局注册表单input标签前增加必填项*提示与input框不在同一行问题

解决Bootstrap布局注册表单input标签前增加必填项*提示与input框不在同一行问题

 

注册表单部分代码如下：

 1 <form id="registForm" class="form-horizontal" action="${pageContext.request.contextPath }/register" method="post" style="margin-top: 5px;">
 2                         <div class="form-group">
 3                             <label for="username" class="col-sm-2 control-label">用户名</label>
 4 
 5                             <div class="col-sm-6">
 6                                 <em style="color: red;">*</em>
 7                                 <input type="text" class="form-control" id="username" name="username" placeholder="请输入用户名">
 8                             </div>
 9                         </div>
10                         <div class="form-group">
11                             <label for="inputPassword3" class="col-sm-2 control-label">密码</label>
12                             <div class="col-sm-6">
13                                 <em style="color: red;">*</em>
14                                 <input type="password" class="form-control" id="password" name="password" placeholder="请输入密码">
15                             </div>
16                         </div>

出现的问题是*与input框不在同一水平位置上，如下图示

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

display的两个取值

在自己的css文件中修改如下

 1 .form-control {
 2                 display: inline;
 3                 width: 90%;
 4                 height: 34px;
 5                 padding: 6px 12px;
 6                 font-size: 14px;
 7                 line-height: 1.42857143;
 8                 color: #555;
 9                 background-color: #fff;
10                 background-image: none;
11                 border: 1px solid #ccc;
12                 border-radius: 4px;
13                 -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
14                 box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
15                 -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
16                 -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
17                 transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
18             }

修改后的页面，*与input框在同一行，效果如下