Question

我正在尝试安装引导程序以在我的使用thymeleaf的spring boot项目中使用。我在模板上收到此错误（index.html，如下所示）：

throw

我认为这是因为引导程序未正确安装。下面我也有文件的图像。我很确定所有依赖项都是正确的。

索引HTML：

Malformed markup: Attribute "class" appears more than once in element

POM文件：

<!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>&nbsp;
                        <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>

项目结构：

Answer 1

该异常将在html中出现错误的行＃在任何情况下，实际的问题都在这里：

<div class="container" class="row">

Thymeleaf不允许元素具有两个具有相同名称（Attribute "class" appears more than once in element）的属性。只需将其更改为：

<div class="container row">

Bootstrap无法与Spring Boot一起使用？

1 个答案: