html - 引导按钮在手机屏幕上不起作用

Question

<header id="header">

    <div class="container">

        <div class="logo float-left">
            <!-- Uncomment below if you prefer to use an image logo -->
            <h1 class="text-light">
                <a href="/" class="scrollto">
                    <span>E-Wallet</span>
                </a>
            </h1>
        </div>

        <nav class="main-nav float-right d-none d-lg-block">
            <ul>
                <!-- <li class="active"><a href="#intro">Home</a></li> -->
                <li>RM<input type="text" id="amount" name="amount" value="{{ request.user.balance }}" placeholder="00.00" readonly style="margin-top: 10px;width: 60px;">
                </li>
                <li style="margin-top: 10px">
                    <button 
                    data-url="{{ request.scheme }}://{{ request.get_host }}{% url 'reload' %}"{% if not can_reload %} disabled {% endif %} id="reload" type="button" class="btn btn-success">
                        <i class="fa fa-plus-circle" aria-hidden="true"></i> Reload
                    </button>
                </li>


                {% if user.is_authenticated %}
                <li class="drop-down"> <a href="#">{{ user.username }}</a>
                    <ul>
                        <li>
                            <a href="{% url 'profile' %}" target="_blank">
                                Profile
                            </a>
                        </li>
                        <li>
                            <a href="{% url 'logout' %}" target="_blank">
                                Logout
                            </a>
                        </li>
                    </ul>
                </li>
                {% else %}
                <li>
                    <a href="{% url 'login' %}" target="_blank">
                        Login
                    </a>
                </li>
                <li>
                    <a href="{% url 'register' %}" target="_blank">
                        Sign Up
                    </a>
                </li>
                {% endif %}
            </ul>
        </nav><!-- .main-nav -->
        
    </div>
</header>

当从笔记本电脑或大屏幕上查看时，重新加载按钮正在工作，但每当我尝试从移动屏幕与其交互时，该按钮就会停止工作。到目前为止，我已经看到了很多示例，但现在正在使用我的示例。谁能帮帮我？

标签： htmlcssbootstrap-4