Question

在使用meta的基础上，我使用了bootstrap和jquery cdn优化了我的应用程序。我修复了其中的一些问题，顶部的3条现在可以响应，并且在单击时折叠或扩展。但是，购物车图标和登录按钮仍隐藏在移动设备上（在商店中）的产品后面。（如果您长按图片，则会在其后面隐藏两个按钮，您会注意到它。）有什么建议可解决此问题？

您可以在这里查看网站：

https://market-shaurya.herokuapp.com

我的基本html页面

<!DOCTYPE html>
{% load static %}
<html>
    <head>
        <title>Ecom</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1" />
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

        <link rel="stylesheet" type="text/css" href="{% static 'css/main.css' %}">
    </head>
    <body>
            <nav class="navbar navbar-expand-lg navbar-dark bg-dark" style="height:80px">
                    <a style="font-size:33px; color: #ffae00" class="navbar-brand" href="{% url 'store' %}"><strong><strong>Ma₹ket</strong></strong></a>
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                      <span class="navbar-toggler-icon"></span>
                    </button>

                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                      <ul class="navbar-nav mr-auto">
                        <li class="nav-item active">
                          <a class="nav-link" href="{% url 'store' %}">Items(Store) <span class="sr-only">(current)</span></a>
                        </li>

                      </ul>
                        {% block right_panel %}
                          <form class="form-inline mr-auto my-lg-0" method="get">
                          <!--<input class="form-control mr-sm-2" style="width:1000px; height:38px;" type="text" placeholder="Search for items" aria-label="Search">-->
                            {{myFilter.form}}
                          <button class="btn btn-outline-warning btn-rounded btn-sm ml-2 my-0" style="width:80px; height:38px" type="submit">Search</button>
                          </form>
                        {% endblock %}
                        {% if user.is_authenticated %}
                          <div class="form-inline my-2 my-lg-0">
                            <span class="hello-msg"><strong></strong>Hello, {{ request.user }}</strong></span>
                            <a href="{% url 'logout' %}" class="btn btn-danger">Logout</a>
                            <a href="{% url 'cart' %}">
                            <img  id="cart-icon" src="{% static 'images/cart.png' %}">
                                </a>
                                <p id="cart-total">{{cartItems}}</p>
                          </div>

                        {% else %}
                          {% block left_panel %}
                            <div class="form-inline my-2 my-lg-0">
                                <a href="{% url 'login' %}" class="btn btn-success">Login</a>
                                <a href="{% url 'cart' %}">
                                  <img  id="cart-icon" src="{% static 'images/cart.png' %}">
                                </a>
                                <p id="cart-total">{{cartItems}}</p>
                            </div>
                          {% endblock %}
                        {% endif %}
                    </div>

                  </nav>

        <hr>
        <div class="container">
            <br>
            {% block content %}

            {% endblock content %}
        </div>


    </body>

      <!-- jQuery !-->
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"> </script>
      <!-- jQuery UI !-->
      <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">

      <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>



    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>

    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

    <script type="text/javascript" src="{% static 'js/cart.js' %}"></script>

</html>

如何针对移动设备进行优化？

0 个答案: