Question

我是Bootstrap的新手，但我真的很困惑。我启动了新的Maven Web项目，并希望将Bootstrap放入jsp文件中，但是在Tomcat列上运行页面后，当它们应该是内联时，它们会在彼此之上显示。我做错了什么？

    <%@ page language="java" pageEncoding="UTF-8" session="false"%>

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="/resources/css/bootstrap.min.css" rel="stylesheet" type="text/css">



    <title>Title</title>

</head>
<body>
<div class="container-fluid">
     <h1>Hello World!</h1>
      <p>Resize the browser window to see the effect.</p>
  <div class="row">
    <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
    <div class="col-sm-4" style="background-color:lavenderblush;">.col-sm-4</div>
    <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
  </div>
</div>

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="/resources/js/bootstrap.min.js"></script>   
</body>
</html>

Answer 1

这适合你吗？

JSFiddle

<div class="container-fluid">
 <h1>Hello World!</h1>
  <p>Resize the browser window to see the effect.</p>

您可以忽略上面的代码只是复制和粘贴

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js

Answer 2

我认为你为bootstrap定义了一个错误的路径位置。这意味着浏览器在请求引导程序文件时会收到HTTP 404。您应该在css路径之前拥有项目/应用程序的名称。如果您没有项目名称，Tomcat会将请求定向到ROOT文件夹。这就是bootstrap链接的方式：

 <link href="/project/css/bootstrap.min.css" rel="stylesheet" type="text/css">

此外，您可以使用以下代码动态获取项目名称或上下文路径：

<link href="/${pageContext.request.contextPath}/css/bootstrap.min.css" rel="stylesheet" type="text/css">

一个侧面建议......既然您使用的是Maven，为什么不使用WebJars？它非常强大且文档齐全。

Bootstrap - 列彼此重叠显示

2 个答案: