Bootstrap 不能与 spring-boot 一起使用？
Posted
技术标签:
【中文标题】Bootstrap 不能与 spring-boot 一起使用？【英文标题】：Bootstrap not working with spring-boot? 【发布时间】：2018-12-25 16:07:36 【问题描述】：我正在尝试安装 bootstrap 以在我的 spring boot 项目中使用，该项目使用 thymeleaf。我在模板中遇到了这个错误（index.html，如下所示）：
Malformed markup: Attribute "class" appears more than once in element
我认为这是因为未正确安装引导程序。下面我也有文件的图像。 我很确定所有依赖项都是正确的。
索引 HTML：
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="/bootstrap-3.3.7/css/bootstrap.min.css"/>
<script src="/bootstrap-3.3.7/js/bootstrap.min.js"></script>
<!-- <link rel="stylesheet" type="text/css"
th:href="@/webjars/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" th:href="@/css/main.css" />
<script
src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js">
</script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script> -->
<title>Home</title>
<style></style>
</head>
<body>
<div class="navbar navbar-default" role="navigation" id="topnavbar">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-
toggle="collapse" data-target="#navbar-main">
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="navbar-main">
<ul class="nav navbar-nav">
<li><a href="/"><span class="glyphicon glyphicon-home"></span>Profile</a></li>
<li>
<a href="/competition">
<span class="glyphicon glyphicon-star"></span> Competitions
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="/logout"> <span class="glyphicon glyphicon-user"></span>
<strong>Log out</strong>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="container" class="row">
<div class="page-header" id="banner">
<div class="row">
<div class="col-lg-8 col-md-7 col-sm-6">
<img src="ban.png">
</div>
<div class="col-lg-4 col-md-5 col-sm-6">
<div class="sponsor"></div>
</div>
</div>
</div>
</div>
<div class="container"></div>
</body>
<script th:inline="javascript">
$(document).ready(function ()
var panels = $('.user-infos');
var panelsButton = $('.dropdown-user');
panels.hide();
//Click dropdown
panelsButton.click(function ()
//get data-for attribute
var dataFor = $(this).attr('data-for');
var idFor = $(dataFor);
//current button
var currentButton = $(this);
idFor.slideToggle(400, function ()
//Completed slidetoggle
if (idFor.is(':visible'))
currentButton.html('<i class="glyphicon glyphicon-
chevron - up
text - muted
"></i>');
else
currentButton.html('<i class="glyphicon glyphicon-
chevron - down
text - muted
"></i>');
)
);
$('[data-toggle="tooltip"]').tooltip();
$('button').click(function (e)
e.preventDefault();
alert("This is a demo.\n :-)");
);
);
</script>
</html>
POM 文件：
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0
http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.finalYearProject</groupId>
<artifactId>student-life</artifactId>
<version>0.0.1-SNAPSHOT</version>
<packaging>jar</packaging>
<name>student-life</name>
<description>Jill's Student Life Final Year Project</description>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>1.5.8.RELEASE</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<project.reporting.outputEncoding>UTF-
8
</project.reporting.outputEncoding>
<java.version>1.8</java.version>
<!-- upgrade to thymeleaf version 3 -->
<thymeleaf.version>3.0.8.RELEASE</thymeleaf.version>
<thymeleaf-layout-dialect.version>2.2.2</thymeleaf-layout-
dialect.version>
<thymeleaf-extras-springsecurity4.version>3.0.2.RELEASE</thymeleaf-
extras-springsecurity4.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!-- <dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap-datepicker</artifactId>
<version>1.0.1</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>3.3.7</version>
</dependency> -->
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>3.3.7</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>jquery</artifactId>
<version>3.2.1</version>
</dependency>
<dependency>
<groupId>org.apache.tomcat.embed</groupId>
<artifactId>tomcat-embed-jasper</artifactId>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>org.thymeleaf.extras</groupId>
<artifactId>thymeleaf-extras-springsecurity4</artifactId>
</dependency>
<dependency>
<groupId>commons-beanutils</groupId>
<artifactId>commons-beanutils</artifactId>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>3.3.7</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>jquery</artifactId>
<version>3.2.1</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-security</artifactId>
</dependency>
<dependency>
<groupId>org.hsqldb</groupId>
<artifactId>hsqldb</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>org.apache.tomcat.embed</groupId>
<artifactId>tomcat-embed-jasper</artifactId>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>com.h2database</groupId>
<artifactId>h2</artifactId>
</dependency>
<!-- <dependency>
<groupId>org.springframework.session</groupId>
<artifactId>spring-session-data-redis</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.session</groupId>
<artifactId1>spring-session</artifactId>
<version>1.2.2.RELEASE</version>
</dependency> -->
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
</project>
项目结构：
【问题讨论】：
【参考方案1】：异常会在发生错误的 html 中给出 # 行...无论如何，实际问题在这里：
<div class="container" class="row">
Thymeleaf 不允许一个元素有两个同名的属性 (Attribute "class" appears more than once in element)。只需将其更改为：
<div class="container row">
【讨论】：
修复了错误，但 Bootstrap 仍然无法正常工作 可能还不是css。打开您的开发者工具，查看哪些文件是404ing，然后修复它们的链接。
由于我的“初学者”，我不知道如何去做你在 Eclipse 中问的内容.....
在 Chrome 或 Firefox 中打开您的应用程序。按 F12 打开开发人员工具，然后单击网络选项卡。刷新页面，您应该会看到浏览器发出的所有请求的列表。您需要确保引导程序正确加载（并且不会因 404 未找到错误而变为红色 - 如果是，您需要更正指向它的链接）。如果这不能解决问题，您将不得不提供更多详细信息（因为“Bootstrap 仍然无法正常工作”而没有任何错误消息或其他信息并不能真正提供任何解决问题的线索）。以上是关于Bootstrap 不能与 spring-boot 一起使用？的主要内容，如果未能解决你的问题，请参考以下文章
为啥 bootstrap-sass 不能与 Rails 一起使用？
vee-validate 不能与 bootstrap-vue 一起使用
Twitter bootstrap typeahead 不能与 data-source 属性一起正常工作
TypeError: eleves.map 不是一个函数 React/Spring-boot 不能显示@ManyToOne 关系