Question

当我折叠网站时，菜单项消失了，并且切换按钮显示在右上角，但是当我单击它时，什么都没有反应。

但是，当我单击切换按钮时，没有任何反应。因此，该网页无法在移动视图中使用。

我尝试了一些无济于事的方法，甚至试图从Bootstrap中使用新的导航栏来解决相同的问题。我使用了jquery和javascript CDN，并且引导CSS和引导javascript仍然存在相同的问题。

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Fav and touch icons -->


    <title>My Wesite</title>
    <!-- Bootstrap core CSS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://cdn.ckeditor.com/4.11.1/standard/ckeditor.js"></script>



    <link href="assets/css/style.css" rel="stylesheet">

    <!-- styles needed for carousel slider -->
    <link href="assets/plugins/owl-carousel/owl.carousel.css" rel="stylesheet">
    <link href="assets/plugins/owl-carousel/owl.theme.css" rel="stylesheet">




    <!-- include pace script for automatic web page progress bar  -->
    <script>
        paceOptions = {
            elements: true
        };
    </script>
    <script src="assets/js/pace.min.js"></script>



</head>
<body>
<div id="wrapper">

        <div class="header">
            <nav class="navbar fixed-top navbar-site navbar-light bg-light navbar-expand-md"
                 role="navigation">
                <div class="container">

                <div class="navbar-identity">


                    <a href="posts" class="navbar-brand logo logo-title">
                    <span class="logo-icon"><img class="navbar-brand" src=" assets\image.png" width="180px" height="178px">
                    </span>My<span>Website</span> </a>


              <button data-target=".navbar-collapse" data-toggle="collapse" class="navbar-toggler pull-right" type="button">

                        <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg>



                    </button>

</div>






                    <ul class="navbar-collapse collapse">
<li class = "active"><a href="#"> Posts</a></li>



                            <li class="dropdown-item"><a href="login.php">Login In</a></li>

                    <li class="dropdown-item" ><a href="register.php"?>users/register">Register </a>
                    </li>








                                    <li class="dropdown-item"><a href="<?php echo base_url();?>logout"><i class=" icon-logout"></i> Log out </a>
                                    </li>
                            </ul>
                            </li>
                            <li class="postadd nav-item"><a class="btn btn-block   btn-border btn-post btn-danger nav-link" href="create.php">Post</a>
                            </li>

                        </ul>
                    </div>
                    <!--/.nav-collapse -->
                </div>
                <!-- /.container-fluid -->
            </nav>
        </div>
        <!-- /.header -->
    <div class="search-row-wrapper" style="background-image: url(images/bg.jpg)">
        <div class="inner">
        <div class="container ">
            <form action="#" method="GET">
                <div class="row">



                    <div class="col-md-3">

                    </div>
                </div>
            </form>
        </div>
        </div>
    </div>

</div>

Answer 1

如果您已经为此使用外部库，那么这个小脚本可能是您的解决方案：https://github.com/grzegorzgit/Litomobile 您只需创建具有ul，li结构的菜单，此脚本即可自动创建移动版本。它简单，但也有一些自定义选项。

切换按钮在移动引导程序上不起作用

1 个答案: