Bootstrap - 列相互重叠答案

【问题标题】：Bootstrap - Columns appear on top of each otherBootstrap - 列相互重叠
【发布时间】：2015-07-29 17:22:37
【问题描述】：

我是 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>

【问题讨论】：

标签： css twitter-bootstrap jsp tomcat frontend

【解决方案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

【讨论】：

这是我的输出，列应该是内联的，但它们在行中
正在按预期工作。检查新的 JSFiddle 并检查差异。让我知道它是否对您有帮助
在 JSF Fiddle 中，一切看起来都很好，但是当我把它放在我的项目中时，无论我如何调整浏览器窗口的大小，它的大小都是相同的。我的导入看起来不错，但看起来 Tomcat 没有看到 Bootstrap css
我的意思是浏览器控制台。我认为问题在于引导文件的链接。您可以尝试使用 bootstrap cdn 的链接吗？我更新了我的答案以包括它们。
您可以将引导文件放在您的网站目录中，唯一的错误是指向它们的链接。如果有用，标记为正确:)

【解决方案2】：

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

 <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？它真的很强大并且有据可查。

【讨论】：