事情是这样的:我正在 IntellijIDEA 中创建一些带有 bootstrap css 的 html 文件(代码如下)。在浏览器中打开它,一切正常。
将该代码复制到 .jsp 文件,启动 Tomcat 服务器,css 不起作用。
<html>
<head>
<title>Money Transfer</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="bootstrap/dist/css/bootstrap.css" rel="stylesheet" media="screen">
</head>
<body>
<form action="submit" method="get">
<form class="form-horizontal" role="form">
<div class="row">
<div class="col-md-5 col-md-offset-4">
<h2 class="form-signing-heading">Money Transfer Form</h2></div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-1 col-md-offset-3"><label>Sender</label></div>
<div class="col-md-3"><select name="sender" class="form-control">
<option value="John Doe">John Doe</option>
<option value="Mr.Smith">Mr.Smith</option>
<option value="ScratchCard">ScratchCard</option>
</select></div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-1 col-md-offset-3"><label>Receiver</label></div>
<div class="col-md-3"><select name="receiver" class="form-control">
<option value="jane Doe">Jane Doe</option>
<option value="Mrs.Smith">Mrs.Smith</option>
<option value="System">System</option>
</select></div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-1 col-md-offset-3"><label>Amount</label></div>
<div class="col-md-3">
<div class="input-group">
<input type="amount" class="form-control" placeholder="Amount" name="amount">
<span class="input-group-addon">$</span>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-5">
<button type="send" class="btn btn-success">Send</button>
<button type="cancel" class="btn btn-link">Cancel</button>
</div>
</div>
</form>
</form>
<script src="//code.jquery.com/jquery.js"></script>
<script src="bootstrap/dist/js/bootstrap.min.js"></script>
</body>
</html>
最佳答案
我认为相对路径有问题。 jsp 的相对路径和html 文件的相对路径不同。查看您的 jsp 页面后,请在浏览器中查看源代码并尝试打开这些 css 文件。您将收到一条错误消息。
我不知道你的元素文件/文件夹结构,但我建议在你的 jsp 文件中使用 servlet 上下文路径来计算你的 css 文件的正确路径。
使用 request.getContextPath()
获取 jsp 文件中的上下文路径,并使用此表达式组成 css/javascript 文件的完整路径。
如果 bootstrap
文件夹位于您的网络应用程序文件夹的根目录下,则使用此结构:
<link href="<%=request.getContextPath()%>/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" media="screen">
关于html - JSP 不获取 bootstrap css (IDEA + Tomcat),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19229795/