Question

这是事情：我在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>

Answer 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">

JSP没有拿起bootstrap css（IDEA + Tomcat）

1 个答案: