JSP 不接受引导 css (IDEA + Tomcat)答案

【问题标题】：JSP doesn't pick up bootstrap css (IDEA + Tomcat)JSP 不接受引导 css (IDEA + Tomcat)
【发布时间】：2013-10-07 16:20:11
【问题描述】：

事情是这样的：我正在 IntellijIDEA 中创建一些带有引导 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>

【问题讨论】：

标签： html css jsp intellij-idea tomcat6

【解决方案1】：

我认为相对路径存在问题。 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">

【讨论】：