集成Bootstrap，Jquery和Thymeaf的问题

时间：2018-11-17 16:01:27

标签： jquery html css twitter-bootstrap thymeleaf

我正在尝试创建一个双重下拉列表，因此我从这里w3schools找到了很好的例子。但是，当我从那里粘贴代码时，下拉菜单不起作用。看起来像：

First

按钮“教程”。

当我在链接中和从链接中替换引导文件时，双倍下拉效果很好，但是标题之类的其他东西看起来很丑：

示例：

来自 

<link href="../static/css/bootstrap.css" rel="stylesheet" th:href="@{/css/bootstrap.css}"/>

至 

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" th:href="@{'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'}"/>

Second

您能帮我解决这个问题吗？下面的代码：

HTML： 

<!doctype html>
<html lang="ru" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="БАНК">
    <meta name="author" content="">

    <title>БАНК</title>

    <link href="../static/css/bootstrap.css" rel="stylesheet" th:href="@{/css/bootstrap.css}"/>
    <link href="../static/css/main.css" th:href="@{/css/main.css}" rel="stylesheet">
    <link rel="icon" href="../static/img/favicon.ico" th:href="@{/img/favicon.ico}"/>
    <script src="../static/js/jquery-3.1.0.min.js" th:src="@{/js/jquery-3.1.0.min.js}"></script>
    <script src="../static/js/blog-scripts.js" th:src="@{/js/blog-scripts.js}"></script>
    <script src="../static/js/bootstrap.js" th:src="@{/js/bootstrap.js}"></script>
    <style>
        .dropdown-submenu {
            position: relative;
        }

        .dropdown-submenu .dropdown-menu {
            top: 0;
            left: 100%;
            margin-top: -1px;
        }
    </style>
</head>

<body>
<header th:replace="layout :: site-header"></header>

<div class="col-sm-12 blog-header">
    <div class="container">
        <h1 class="blog-title text-center">test</h1>
    </div>
</div>

<main role="main" class="container">
    <div class="row">
        <div class="col-xl-9 blog-main">
            <div class="dropdown">
                <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials
                    <span class="caret"></span></button>
                <ul class="dropdown-menu">
                    <li><a tabindex="-1" href="#">HTML</a></li>
                    <li><a tabindex="-1" href="#">CSS</a></li>
                    <li class="dropdown-submenu">
                        <a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a tabindex="-1" href="#">2nd level dropdown</a></li>
                            <li><a tabindex="-1" href="#">2nd level dropdown</a></li>
                            <li class="dropdown-submenu">
                                <a class="test" href="#">Another dropdown <span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">3rd level dropdown</a></li>
                                    <li><a href="#">3rd level dropdown</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>

        </div>

        <div class="col-xl-9 blog-main">
            <div class="blog-post" th:each="post : ${latest5posts}">
                <h2 class="blog-post-title"><a th:text="${post.title}" th:href="@{'/posts/view/' + ${post.id}}"></a>
                </h2>
                <p class="blog-post-meta"
                   th:text="${#dates.format(new java.util.Date(post.date),'HH:mm, dd.MM.yyyy')}">18:08, 21 ноября
                    2017</p>

                <p class="blog-post-body" th:text="${post.body}" contenteditable="true"></p>
                <hr>
            </div>
        </div>
    </div><!-- /.blog-main -->

    <aside class="col-xl-3 ml-sm-auto blog-sidebar">
        <div class="sidebar-module">
            <h4>Архив</h4>
            <ol class="list-unstyled" th:each="latest10 : ${latest10posts}">
                <li><a th:href="@{'/posts/view/' + ${latest10.id}}" th:text="${latest10.title}">Ноябрь 2017</a></li>
            </ol>
        </div>
    </aside><!-- /.blog-sidebar -->
    </div><!-- /.row -->
    <footer th:replace="layout :: site-footer"></footer>
</main><!-- /.container -->
<script>
    $(document).ready(function(){
        $('.dropdown-submenu a.test').on("click", function(e){
            $(this).next('ul').toggle();
            e.stopPropagation();
            e.preventDefault();
        });
    });
</script>
</body>
</html>

CSS： 

@media (min-width: 48em) {
    html {
        font-size: 18px;
    }
}

body {
    background-color: #CDEAD3;
    color: #556A59;

}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
    font-family: sans-serif;
    font-weight: 400;
}

.container {
    max-width: 90rem;
}

.blog-masthead {
    margin-bottom: 3rem;
}

.nav {
    margin-left: 0.9rem;
    background-color: #556A59;
    box-shadow: inset 0 -.1rem .25rem rgba(0, 0, 0, .1);
    border-radius: .5rem;
}

.nav-link {

    position: relative;
    padding: 1rem;
    font-weight: 500;
}

.nav-link:hover,
.nav-link:focus {
    background-color: transparent;
}

.nav-link.active::after {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 0;
    margin-left: -.3rem;
    vertical-align: middle;
    content: "";
    border-right: .3rem solid transparent;
    border-bottom: .3rem solid;
    border-left: .3rem solid transparent;
}

.nav-link.active {
    color: #fff;
}

.nav-link.active::after {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 0;
    margin-left: -.3rem;
    vertical-align: middle;
    content: "";
    border-right: .3rem solid transparent;
    border-bottom: .3rem solid;
    border-left: .3rem solid transparent;
}

/*
 * Blog name and description
 */
.row {
    margin: 0.9rem;
}

.blog-main {
    margin-bottom: 3rem;
    padding: 2rem;
    background-color: #B1EABD;
    border-radius: .5rem;
}

.blog-header {
    padding-bottom: 1.25rem;
    margin-bottom: 2rem;
    margin-left: 0.9rem;
}

.blog-title {
    padding: 1rem;
    margin-right: 1rem;
    margin-bottom: 0;
    font-weight: 400;
    background-color: #B1EABD;
    /*border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;*/

}

.lead-blog-description {
    font-size: 1.1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 1rem;
    margin-bottom: 0;
    margin-right: 1rem;
    border-bottom: .05rem solid #eee;
    background-color: #f5f5f5;
    border-bottom-left-radius: .25rem;
    border-bottom-right-radius: .25rem;
}

@media (min-width: 50em) {
    .blog-title {
        font-size: 3rem;
    }
}

/*
 * Main column and sidebar layout
 */

/* Sidebar modules for boxing content */
.sidebar-module {
    padding: 1rem;
}

.sidebar-module-inset {
    padding: 1rem;
    background-color: #f5f5f5;
    border-radius: .5rem;
}

.sidebar-module-inset p:last-child,
.sidebar-module-inset ul:last-child,
.sidebar-module-inset ol:last-child {
    margin-bottom: 0;
}

/* Pagination */
.blog-pagination {
    margin-bottom: 4rem;
}

.blog-pagination > .btn {
    border-radius: 2rem;
}

/*
 * Blog posts
 */

.blog-post {
    margin-top: 1rem;
}

.blog-post hr {
    margin-bottom: 2rem;
    margin-top: 2rem;
}

.blog-post-title a,
.blog-post-title a.active,
.blog-post-title a:hover,
.blog-post-title a:focus,
.blog-post-title a:after {
    color: inherit;
    text-decoration: none;
    margin-bottom: .25rem;
    font-size: 2rem;
}

.blog-post-meta {
    margin-top: 0.5rem;
}

.blog-post-body {
}

/*
 * Footer
 */

.blog-footer {
    margin-left: 0.9rem;
    border-radius: .5rem;
    padding: 1rem 0;
    text-align: center;
    background-color: #556A59;
    border-top: .05rem solid #e5e5e5;
}

.blog-footer p:last-child {
    margin-bottom: 0;
}

.btn_form button {
    height: 50px;
    border: 0px solid white;
    background: #343a40;
    outline: none;
    font-weight: bold;
}

.form-signin {
    margin: 0px auto;
    width: 500px;
}

.form-signin-heading {
    margin-top: 50px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

1 个答案:

答案 0 :(得分：0)

似乎我的引导程序和jquery版本已经过时。现在看起来不错。愚蠢的错误。

相关问题
最新问题