首页 > 解决方案 > Bootstrap 4,材料套件 - 导航栏切换器不起作用

问题描述

我有带有移动导航栏工具的导航栏,但是,这不起作用。我正在使用material-kit,这是在我的网站上。我想使用它,因为这是非常酷的 CSS。

<head>
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
    <link href="https://hamsterofficial.eu/css/material-kit.css?v=2.0.4" rel="stylesheet"/>
<head>

<nav class="navbar navbar-color-on-scroll fixed-top  navbar-expand-lg" color-on-scroll="100" id="sectionsNav">
        <div class="container">
            <div class="navbar-translate">
                <a class="navbar-brand" href="">TEST WEBSITE </a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                    <span class="navbar-toggler-icon"></span>
                    <span class="navbar-toggler-icon"></span>
                </button>
            </div>
            <div class="collapse navbar-collapse">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item">
                        <a href="" class="btn btn-info" data-toggle="dropdown">test link</a>
                    </li>
                    <li class="nav-item">
                        <a href="/blog" class="nav-link">Blog</a>
                    </li>
                    <li class="nav-item">
                        <a href="/autors" class="nav-link">Autors</a>
                    </li>
                    <li class="nav-item">
                        <a href="/login" class="btn btn-rose btn-raised btn-round" data-toggle="dropdown"><i class="material-icons">input</i> Sign up</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>


<script src="https://hamsterofficial.eu/js/core/jquery.min.js" type="text/javascript"></script>
    <script src="https://hamsterofficial.eu/js/core/popper.min.js" type="text/javascript"></script>
    <script src="https://hamsterofficial.eu/js/core/bootstrap-material-design.min.js" type="text/javascript"</script>

标签: htmlcss

解决方案


推荐阅读