Bootstrap 4 nav-toggler button not work on mobile device

Question

The following code works with chrome browser on laptop, but doesn't work with chrome (v74 & v84) on mobile device. when clicking the button on mobile device, no response.

<!doctype html>
<html lang="en">

    <head>
        <title>Learning Log</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link crossorigin="anonymous" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" rel="stylesheet">
        <script crossorigin="anonymous" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script crossorigin="anonymous" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script crossorigin="anonymous" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>  
        <nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4 border">   
            <a class="navbar-brand" href="/"> Learning Log</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse"
            aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarCollapse">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="/topics/">Topics<span class="sr-only">(current)</span></a>
                    </li>   
                </ul>
                <ul class="navbar-nav ml-auto">
                        <li class="nav-item">
                            <a class="nav-link" href="/users/registrater/">Registrater</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/users/login/">Log in</a>
                        </li>
                </ul>
            </div>
        </nav>
    </body>
</html>

Answer 1

The weird thing is that I explicitly specified a jquery http address as below, and it worked with chrome browser on my mobile phone, while now it doesn't work again, but it stills works with mi browser on my mobile phone, interesting?

<script src="http://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
{% bootstrap_css %}
{% bootstrap_javascript jquery='full' %}

Bootstrap 4 nav-toggler button not work on mobile device

Question

1 answers

solution1
0 2020-09-07 14:46:40

Bootstrap 4 nav-toggler button not work on mobile device

Question

1 answers

solution1 0 2020-09-07 14:46:40

solution1
0 2020-09-07 14:46:40