我正在使用bootstrap验证来验证jsp页面。
我的文件夹结构如下，
WebContent
├── bootstrap-form-validation
├── js
└── pages
此处所有三个文件夹都在网络内容下。如果我在页面文件夹下再创建一个名为teacherDetails的文件夹来放置我的jsp文件。我的问题是验证工作不正常。但是当我把jsp文件放在页面文件夹之外或者直接放在webcontent下时，它的工作正常，对于我的项目，它必须在pages文件夹中。请帮助我，我的jsp代码如下
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap, from Twitter</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<!-- Optional theme -->
<link href="<%=request.getContextPath()%>/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="<%=request.getContextPath()%>/bootstrap-form-validation/style.css" rel="stylesheet">
<link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/bootstrap-datetimepicker-master/css/datetimepicker.css">
<script src="<%=request.getContextPath()%>/twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-modal.js"></script>
<script src="<%=request.getContextPath()%>/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.min.js"></script>
</head>
<script type="text/javascript">
$(function() {
$('#datetimepicker4').datetimepicker({
pickTime : false
});
});
</script>
<script>
$(function () { $("input,select,textarea").not("[type=submit]").jqBootstrapValidation(); } );
</script>
<script>
function profileDetails() {
document.getElementById("profiledetails").submit();
}
function profileCancel() {
document.getElementById("profileDetails").reset();
}
</script>
<style>
.no-space [class *="span"] {
margin-left: 0 !important;
width: 25% !important;
//
This
is
for
4
elements
ONLY
in
the
row
}
</style>
<body>
<form class="well form-horizontal" id="create_teacher" method="post" action="">
<div style="height: 850px;">
<div style="width: 104%; margin-top: -20px;">
<fieldset>
<legend style="color: #333;"> Teacher Information</legend>
</div>
<br> <br>
<div style="margin-left: 140px">
<div class="form-group">
<label for="uln" class="control-label">Teacher Id:</label>
<div class="col-xs-8">
<div class="col-lg-8">
<input type="text" class="form-control" name="teacherId"
id="teacherId">
</div>
</div>
</div>
<br>
<div class="form-group">
<label for="name" class="control-label">Name :</label>
<div class="col-xs-8">
<div class="col-lg-8">
<input type="text" class="form-control" name="teacherName"
id="teacherName">
</div>
</div>
</div>
<br>
<div class="form-group">
<label for="gender" class="control-label">Gender:</label>
<div class="col-xs-8">
<div class="col-lg-8">
<select class="form-control" name="gender">
<option></option>
<option>Male</option>
<option>Female</option>
</select>
</div>
</div>
</div>
<br>
<div class="form-group">
<label for="dob" class="control-label">Date Of Birth(DOB) :</label>
<div class="col-xs-8">
<div class="col-lg-8">
<input type="date" class="form-control" name="dob" id="date">
</div>
</div>
</div>
<br>
<div class="form-group">
<label for="dob" class="control-label">Date Of
Join:</label>
<div class="col-xs-8">
<div class="col-lg-8">
<input type="date" class="form-control" name="doj" id="date">
</div>
</div>
</div>
<br>
<div class="form-group">
<label for="name" class="control-label">Education
:</label>
<div class="col-xs-8">
<div class="col-lg-8">
<input type="text" class="form-control" name="teacherName"
id="education">
</div>
</div>
</div>
<br>
<div class="form-group">
<label for="name" class="control-label">Experience
:</label>
<div class="col-xs-8">
<div class="col-lg-8">
<input type="text" class="form-control" name="teacherName"
id="experience">
</div>
</div>
</div>
<br>
<div class="form-group">
<label for="name" class="control-label">Prev Employee details :</label>
<div class="col-xs-8">
<div class="col-lg-8">
<input type="text" class="form-control" name="teacherName"
id="prevdetails">
</div>
</div>
</div>
<br>
<div class="form-group">
<label class="control-label">Photo :</label>
<div class="col-xs-8">
<div class="col-lg-8">
<input type="file" />
</div>
</div>
</div>
<br>
<div class="form-group">
<label for="name" class="control-label">Email Id:</label>
<div class="col-xs-8">
<div class="col-lg-8">
<input type="email" class="form-control" name="teacherName"
id="email">
<p class="help-block"></p>
</div>
</div>
</div>
<br>
<div class="control-group">
<label class="control-label"></label>
<div class="controls">
<div style="margin-left: 150px">
<input type="submit" class="btn btn-primary" value="Submit"
onclick="profileDetails();" />
<input type="button" class="btn btn-primary" value="Cancel"
onclick="cancelProfile();" />
</div>
</div>
</div>
</div>
</fieldset>
</div>
</form>
<script src="<%=request.getContextPath()%>/bootstrap-form-validation/assets/js/jquery-1.7.1.min.js"></script>
<script src="<%=request.getContextPath()%>/bootstrap-form-validation/assets/js/jquery.validate.js"></script>
<script src="<%=request.getContextPath()%>/js/script.js"></script>
<script>
addEventListener('load', prettyPrint, false);
$(document).ready(function(){
$('pre').addClass('prettyprint linenums');
});
</script>
</body>
</html>
答案 0 :(得分：1)
您的链接是相对的
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
这些链接将在同一级别搜索提到的文件夹。 因此，如果你把你的jsp放在页面下名为teacherDetails的文件夹中，它会在页面文件夹中查找bootstrap文件夹。
所以要指向当前级别之外的文件夹，您需要按如下方式指定它：
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
./ represents the current folder, ../ will represent the parent of current folder and so on..