Question

我刚刚来到这里，我只是所有这些东西的初学者所以请耐心等待。请你帮助我好吗？

我正在使用Bootstrap创建一个离线网站作为学校项目。当我在笔记本电脑和其他PC上查看我的网站时，一切正常，但当我尝试在手机上查看时出现问题。当我使用手机访问离线网站时（通过股票HTML查看器），切换按钮（导航栏切换按钮，轮播按钮等）不起作用。我认为这个问题与JavaScript有关，但我相信我把所有文件都放到各自的文件夹中。我是

如果它意味着什么，这里的代码摘录只是关于导航栏。

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <title>Learn-IT-Online.com | Home</title>

    <!-- Font Awesome -->
    <link rel="stylesheet" href="css/font-awesome.css">

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Material Design Bootstrap -->
    <link href="css/mdb.min.css" rel="stylesheet">

    <!-- Template styles -->
    <style rel="stylesheet">
        /* TEMPLATE STYLES */
        /* Necessary for full page carousel*/
        
        html,
        body {
            height: 100%;
        }
        /* Navigation*/
        
        .navbar {
            background-color: transparent;
        }
        
        .top-nav-collapse {
            background-color: #304a74;
        }
        
        footer.page-footer {
            background-color: #304a74;
        }
        
        @media only screen and (max-width: 768px) {
            .navbar {
                background-color: #4285F4;
            }
        }
        
        .scrolling-navbar {
            -webkit-transition: background .5s ease-in-out, padding .5s ease-in-out;
            -moz-transition: background .5s ease-in-out, padding .5s ease-in-out;
            transition: background .5s ease-in-out, padding .5s ease-in-out;
        }
        /* Carousel*/
        
        .carousel {
            height: 95%;
        }
        
        @media (max-width: 776px) {
            .carousel {
                height: 100%;
            }
        }
        
        .carousel-item,
        .active {
            height: 100%;
        }
        
        .carousel-inner {
            height: 100%;
        }
        
        /*Caption*/
        
        .flex-center {
            color: #fff;
        }
    </style>

</head>

<body>


    <!--Navbar-->
    <nav class="navbar navbar-toggleable-md navbar-dark fixed-top scrolling-navbar">
        <div class="container">
            <a class="navbar-brand" href="index.html">
                <img src="img/logo-small.png"></a>

            <div class="collapse navbar-collapse" id="navbarNav1">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="index.html" style="text-shadow: 3px 3px 6px indigo;"><i class="fa fa-home"></i> Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="about.html" style="text-shadow: 3px 3px 6px indigo;"><i class="fa fa-info-circle"></i> About</a>
                    </li>
                  <li class="nav-item dropdown btn-group">
                            <a class="nav-link dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="text-shadow: 3px 3px 6px indigo;"><i class="fa fa-list"></i> Study...</a>
                            <div class="dropdown-menu dropdown" aria-labelledby="dropdownMenu1">
                               <a class="dropdown-item" href="modules_intro.html">Introduction: What is Information Technology?</a>
                               <a class="dropdown-item" href="modules_historyofIT.html">The History of Information Technology</a>
                               <a class="dropdown-item" href="modules_whytakeIT.html">Why Take I.T? Some PROS and CONS...</a>
                               <a class="dropdown-item" href="modules_ITjobs.html">Some of the popular jobs in IT: Top 10</a>
                               <a class="dropdown-item" href="modules_basic-essentials-diffproglangs.html">Basic Essentials: Different Programming Languages</a>
                               <a class="dropdown-item" href="modules_index.html"><font color="blue">...More at the Modules Index</font></a>

                            </div>
                        </li>

                </ul>
                <ul>
                <li class="nav-item">
                    <a class="btn btn-info" style="text-shadow: 3px 3px 6px indigo;" href="sign-in.html"><i class="fa fa-user"></i> Sign in</a>
                    </li></ul>
                

            </div>
                          <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav1" aria-controls="navbarNav1" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
        </div>
    </nav>
    <!--/.Navbar-->
    ...

如果它也意味着什么，这是我的js脚本。

<!-- JQuery -->
<script type="text/javascript" src="js/jquery-2.2.3.js"></script>

<!-- Bootstrap tooltips -->
<script type="text/javascript" src="js/tether.js"></script>

<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="js/bootstrap.js"></script>

<!-- MDB core JavaScript -->
<script type="text/javascript" src="js/mdb.js"></script>

<script>
new WOW().init();
</script>

哦，最后一件事，我正在使用Mdbootstrap.com的模板。

切换按钮无法在手机上工作但可在PC上使用

0 个答案: