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

在這里，您使用了 480px 的 min-width 將下拉菜單display:block為display:block 。所以在它下面，css 不會影響下拉菜單。 根據您的要求編寫另一個媒體查詢來處理這種情況或降低范圍（我已經嘗試過 200 並且效果很好）。

希望能幫助到你！！

Answer 2

由於您在媒體查詢中放置了下拉菜單，因此它不起作用。

 .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;

        }