bootstrap - выпадающий список не работает на мобильных устройствах

Question

У меня есть изображение с описанием, и когда я наводю указатель мыши на изображение, оно показывает список из выпадающего списка и работает нормально. Это код:

  <div class="col-md-2 order-first order-lg-last text-center">

        <div class="dropdown">
            <a id="menu1"  >
              <img class="image" src="{{asset('images/bedframe-1.jpg')}}">
            </a> <br> <br>
            <span class="text-capitalize "><strong>Bedframe</strong> </span>
            <ul class="dropdown-menu text-center" role="menu" aria-labelledby="menu1">
              <li role="presentation"><a role="menuitem" tabindex="-1" href="/category/bedsheet-mattress/canopy-bed">Canopy Bed</a></li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="/category/bedsheet-mattress/canopy-bed">Bunk Bed</a></li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="/category/bedsheet-mattress/canopy-bed">Day Bed</a></li>
              <li role="presentation" class="divider"></li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="/category/bedsheet-mattress/canopy-bed">Platform Bed</a></li>
            </ul>
          </div> <br>


      <h3 style="color:black">Featured Deals</h3> <hr>
          <a href="#" id="menu1">
            <img class="product-item" src="{{asset('images/pillow2.jpg')}}">
          </a> <br> <br>
          <span class="text-capitalize" data-toggle="tooltip" data-placement="right" title="Lorem Ipsum y of type and scrambled it"><strong>[COMPANY NAME]</strong>
            <br>

            <span> Pillow,soft,50cm</span>
            <h3><strong>RM20</strong></h3>
            <ul>

              <li>
                <span class="fa fa-star checked"></span>
                <span class="fa fa-star checked"></span>
                <span class="fa fa-star checked"></span>
                <span class="fa fa-star checked"></span>
                <span class="fa fa-star checked"></span>
                <span>(60) </span>
              </li>
              <ul><br>


    </div>

<style>
  @media (min-width:480px) {
    .dropdown:hover .dropdown-menu {
      display: block;
      margin-top: 0;
      transition: all 1.5s;
      transform: scale(1.0);

      transition: .3s ease-in-out;

    }

  }

  .product-item {

    height: 150px;
    width: 150px;

  }


  ul {

    list-style-type: none;
  }


  .image {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
    border-radius: 100%;
    height: 200px;
    width: 200px;
  }

  .image:hover {
    transform: scale(0.5);


  }

  .checked {
    color: orange;
  }


</style>

Однако, когда я запускаю на своем мобильном устройстве, поведение должно показывать раскрывающийся список, когда я нажимаю на изображение, но нажатие на изображение не показывает раскрывающийся список. Как мне исправить эту проблему?

Answer 1

Не работает, так как вы поместили выпадающее меню в медиа-запрос.

 .dropdown-menu{
       display:none
    }    
    .dropdown:hover .dropdown-menu {
          display: block;
          margin-top: 0;
          transition: all 1.5s;
          transform: scale(1.0);

          transition: .3s ease-in-out;

        }

Answer 2

Здесь Вы использовали минимальную ширину 480px для отображения выпадающего меню, так как display:block. Поэтому под ним css не повлияет на выпадающее меню. либо напишите другой медиа-запрос для обработки этого случая, либо уменьшите диапазон (я пробовал с 200, и он работает нормально) согласно вашему требованию.

Надеюсь, это поможет !!