我在jsp页面中有html代码,它引用了css样式表。这个oage是由UI开发人员开发的,我试图通过在New Password和Confirm New Password字段旁边添加密码指南消息来扩展功能。但指南没有显示在我想要的地方。我是UI方面的新手。你能帮帮我吗?
<div role="main" class="reset-passwd loginscreen">
<!-- Main Content Starts -->
<div class="container-fluid">
<div class="row">
<div class="col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3 reset-content">
<h1>Reset Password</h1>
<!--login form start here-->
<p>Please enter the information below to complete your password reset.</p>
<%
// Retrieve the error code returned by the servlet and display as the message
String errorCode = null;
errorCode= (String) request.getAttribute("ErrorCode");
if (errorCode !=null && !errorCode.equals("")) {
errorCode = errorCode.substring(12,errorCode.length());
errorCode = errorCode.substring(0,errorCode.length()-1);
//errorCode = errorCode.replace(".","\\n");
%>
</br>
<p align="left"><font color="red" size="3px">The required password rules were not met. Please see the guidelines below.<% //out.println(errorCode); %></font></p>
<% }%>
<form class="form-horizontal" role="form" name="frmPwdReset" id=login method="POST" action='PasswordReset'>
<div class="form-group">
<div class="col-sm-4">
<input type="password" class="form-control real_pass" placeholder="New Password" name="pwd" id="pwd" size="50"/>
<input type="text" class="form-control fake_pass" id="" value="New Password" style="display:none"/>
</div>
<a title="*Password must start with an alphabetic character
*Password must be at least 7 character(s) long
*Password must contain at least 1 special character(s)
*Password must contain at least 1 uppercase letter(s)
*Password must not match or contain First Name
*Password must not match or contain Last Name
*Password must not match or contain User ID" class="xfe" onclick="return false;" href="#"><i class="ico ico-dim14x14 ico-info top-margin-10 hidden-xs"> </i></a>
</div>
<div class="form-group">
<div class="col-sm-4">
<input type="password" class="form-control real_pass1" placeholder="Confirm New Password" name="cnfpwd" id="cnfpwd" size="50"/>
<input type="text" class="form-control fake_pass1" id="" value="Confirm New Password" style="display:none"/>
</div>
</div>
<hr/>
<div class="form-group">
<table align="center">
<tr>
<td>*Password must start with an alphabetic character</td>
</tr>
<tr>
<td>*Password must be at least 7 character(s) long</td>
</tr>
<tr>
<td>*Password must contain at least 1 special character(s)</td>
</tr>
<tr>
<td>*Password must contain at least 1 uppercase letter(s)</td>
</tr>
<tr>
<td>*Password must not match or contain First Name</td>
</tr>
<tr>
<td>*Password must not match or contain Last Name</td>
</tr>
<tr>
<td>*Password must not match or contain User ID</td>
</tr>
</table>
<div class="col-sm-12 text-align-right form-footer">
<button type="submit" value="Save" name="submit" onclick="return validateForm()" class="btn btn-primary">Continue</button>
<button type="submit" value="Cancel" onclick="return Cancel()" class="btn btn-default right-margin-7">Cancel</button>
</div>
</div>
</form>
<!--login form ends here-->
</div>
</div>
</div>
</div><!-- Main Content Ends -->
答案 0 :(得分:2)
我希望这就是你要找的! (通过col网格系统并排放置)。
我还建议你减少号码。在密码说明中的行。 (尝试将其分为2到4行)
<div role="main" class="reset-passwd loginscreen">
<!-- Main Content Starts -->
<div class="container-fluid">
<div class="row">
<div class="col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3 reset-content">
<h1>Reset Password</h1>
<!--login form start here-->
<p>Please enter the information below to complete your password reset.</p>
<%
// Retrieve the error code returned by the servlet and display as the message
String errorCode = null;
errorCode= (String) request.getAttribute("ErrorCode");
if (errorCode !=null && !errorCode.equals("")) {
errorCode = errorCode.substring(12,errorCode.length());
errorCode = errorCode.substring(0,errorCode.length()-1);
//errorCode = errorCode.replace(".","\\n");
%>
</br>
<p align="left"><font color="red" size="3px">The required password rules were not met. Please see the guidelines below.<% //out.println(errorCode); %></font></p>
<% }%>
<form class="form-horizontal" role="form" name="frmPwdReset" id=login method="POST" action='PasswordReset'>
<div class="form-group">
<div class="col-sm-4">
<input type="password" class="form-control real_pass" placeholder="New Password" name="pwd" id="pwd" size="50"/>
<input type="text" class="form-control fake_pass" id="" value="New Password" style="display:none"/>
<br>
<input type="password" class="form-control real_pass1" placeholder="Confirm New Password" name="cnfpwd" id="cnfpwd" size="50"/>
<input type="text" class="form-control fake_pass1" id="" value="Confirm New Password" style="display:none"/>
</div>
<div class="col-sm-8">
<table align="center">
<tr>
<td>*Password must start with an alphabetic character</td>
</tr>
<tr>
<td>*Password must be at least 7 character(s) long</td>
</tr>
<tr>
<td>*Password must contain at least 1 special character(s)</td>
</tr>
<tr>
<td>*Password must contain at least 1 uppercase letter(s)</td>
</tr>
<tr>
<td>*Password must not match or contain First Name</td>
</tr>
<tr>
<td>*Password must not match or contain Last Name</td>
</tr>
<tr>
<td>*Password must not match or contain User ID</td>
</tr>
</table>
</div>
</div>
<hr/>
<div class="form-group">
<div class="col-sm-12 text-align-right form-footer">
<button type="submit" value="Save" name="submit" onclick="return validateForm()" class="btn btn-primary">Continue</button>
<button type="submit" value="Cancel" onclick="return Cancel()" class="btn btn-default right-margin-7">Cancel</button>
</div>
</div>
</form>
<!--login form ends here-->
</div>
</div>
答案 1 :(得分:0)
请查看以下代码,它可以帮助您解决问题...
.pd0{
padding : 3px;
margin : 5px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div role="main" class="reset-passwd loginscreen">
<!-- Main Content Starts -->
<div class="container-fluid">
<div class="row">
<div class="col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3 reset-content">
<h1>Reset Password</h1>
<!--login form start here-->
<p>Please enter the information below to complete your password reset.</p>
<%
// Retrieve the error code returned by the servlet and display as the message
String errorCode = null;
errorCode= (String) request.getAttribute("ErrorCode");
if (errorCode !=null && !errorCode.equals("")) {
errorCode = errorCode.substring(12,errorCode.length());
errorCode = errorCode.substring(0,errorCode.length()-1);
//errorCode = errorCode.replace(".","\\n");
%>
</br>
<p align="left"><font color="red" size="3px">The required password rules were not met. Please see the guidelines below.<% //out.println(errorCode); %></font></p>
<% }%>
<form class="form-horizontal" role="form" name="frmPwdReset" id=login method="POST" action='PasswordReset'>
<div class="col-sm-6">
<div class="form-group">
<label for="newPasswd">New Password</label>
<input type="password" class="form-control real_pass" placeholder="New Password" name="pwd" id="pwd" size="50"/>
<input type="text" class="form-control fake_pass" id="" value="New Password" style="display:none"/>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control real_pass1" placeholder="Confirm New Password" name="cnfpwd" id="cnfpwd" size="50"/>
<input type="text" class="form-control fake_pass1" id="" value="Confirm New Password" style="display:none"/>
</div>
<button type="submit" value="Save" name="submit" onclick="return validateForm()" class="btn btn-primary">Continue</button>
<button type="submit" value="Cancel" onclick="return Cancel()" class="btn btn-default right-margin-7">Cancel</button>
</div>
<div class="col-sm-5 alert alert-warning pd0">
<p>*Password must start with an alphabetic character</p>
<p>*Password must be at least 7 character(s) long</p>
<p>*Password must contain at least 1 special character(s)</p>
<p>*Password must contain at least 1 uppercase letter(s)</p>
<p>*Password must not match or contain First Name</p>
<p>*Password must not match or contain Last Name</p>
<p>*Password must not match or contain User ID</p>
</div>
</form>
</div>
</div>
</div>
</div>