Bootstrap 4-Rails 5下拉菜单在手机上不起作用

Question

以下导航栏代码中的下拉列表存在问题。 菜单<button>...</button>在移动设备和台式机上均可使用。 只有<li class="nav-item dropdown">不能在电话上使用吗？

使用Rails 5.2.2 Bootstrap 4.2.1

<nav class="navbar navbar-expand-lg navbar-light bg-light nav-upper-clients">
 <div class="container-fluid">
  <%= link_to "MarketWeb", root_path,  class:"navbar-brand" %>
   <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 ml-auto">
       <% Category.order('title ASC').all.each do |cat| %>
         <li class="nav-item"><%= link_to  "#{cat.title} ", clients_category_path(cat), class: "nav-link" %></li>
       <% end %>
     </ul>
     <ul class="navbar-nav ml-auto">
       <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <% if current_user %>
            <%= current_user.first_name %>
          <% else %>
              Mon Compte
          <% end %>
          </a>
         <% if current_user %>
           <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
             <%= link_to "Mes adresses", clients_myaddresses_path, class: "dropdown-item" %>
             <%= link_to "Mes commandes", clients_orders_path, class: "dropdown-item"  %>
             <%= link_to "Mes favoris", clients_favorites_path, class: "dropdown-item"  %>
             <%= link_to "Déconnection", destroy_user_session_path, :method => :delete, :data => { :no_turbolink => true },class: "dropdown-item" %>
           </div>
        <% else %>
           <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
             <%= link_to "Connection", new_user_session_path, class: "dropdown-item"  %>
           </div>           
         <% end %>
       </li>

       <li class= "nav-link">
        <div class="icon-wrapper">
          <%= link_to clients_cart_path do %>
            <i class="fa fa-shopping-bag"></i>  
          <% end %>
          <% if @current_cart.items_count > 0 %>
            <span id="items_count"><%= @current_cart.items_count %></span>
          <% end %>
        </div>
       </li>
       <% if current_user %>
         <li class="nav-link" style="margin-right: 20px; margin-bottom: 20px;">
           <div class="icon-wrapper">
            <%= link_to clients_favorites_path do %>
              <i class="fa fa-heart nav-heart"></i>  
              <% if @favorites.count > 0 %>
                <span id="likes_counter"><%= @favorites.count %></span>
              <% end %>
            <% end %>
          </div>
         </li>
       <% end %>
       <% if current_user && current_user.admin? %>
         <li class="nav-link">
           <%= link_to  "Site admin", admin_products_path %>
         </li>
       <% end %>
     </ul>
   </div>

 </div>
</nav>

这是html

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"> 

<nav class="navbar navbar-expand-lg navbar-light bg-light nav-upper-clients">
  <div class="container-fluid">
    <a class="navbar-brand" href="/">MarketWeb</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 ml-auto">
        <li class="nav-item"><a class="nav-link" href="/clients/categories/4">Accessoires </a></li>
        <li class="nav-item"><a class="nav-link" href="/clients/categories/5">Chemises </a></li>
        <li class="nav-item"><a class="nav-link" href="/clients/categories/2">Pantalons </a></li>
        <li class="nav-item"><a class="nav-link" href="/clients/categories/1">Pulls </a></li>
        <li class="nav-item"><a class="nav-link" href="/clients/categories/3">Tshirts </a></li>
      </ul>
      <ul class="navbar-nav ml-auto">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            User
          </a>
          <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
            <a class="dropdown-item" href="/clients/myaddresses">Mes adresses</a>
            <a class="dropdown-item" href="/clients/orders">Mes commandes</a>
            <a class="dropdown-item" href="/clients/favorites">Mes favoris</a>
            <a data-no-turbolink="true" class="dropdown-item" rel="nofollow" data-method="delete" href="/users/sign_out">Déconnection</a>
          </div>
        </li>

        <li class="nav-link">
          <div class="icon-wrapper">
            <a href="/clients/cart">
              <i class="fa fa-shopping-bag"></i>  
            </a>       
          </div>
        </li>
        <li class="nav-link" style="margin-right: 20px; margin-bottom: 20px;">
          <div class="icon-wrapper">
            <a href="/clients/favorites">
              <i class="fa fa-heart nav-heart"></i>  
              <span id="likes_counter">3</span>
            </a>          
          </div>
        </li>
        <li class="nav-link">
          <a href="/admin/products">Site admin</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

Answer 1

效果完美，如果发现任何问题，请在下面发表评论！

针对IPHONE和IPAD用户

如果在浏览器中下拉菜单不起作用，请添加

  

href =“＃”

在您的dropdown-toggle类中，所以它可以正常工作。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"> 

<nav class="navbar navbar-expand-lg navbar-light bg-light nav-upper-clients">
  <div class="container-fluid">
    <a class="navbar-brand" href="/">MarketWeb</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 ml-auto">
        <li class="nav-item"><a class="nav-link" href="/clients/categories/4">Accessoires </a></li>
        <li class="nav-item"><a class="nav-link" href="/clients/categories/5">Chemises </a></li>
        <li class="nav-item"><a class="nav-link" href="/clients/categories/2">Pantalons </a></li>
        <li class="nav-item"><a class="nav-link" href="/clients/categories/1">Pulls </a></li>
        <li class="nav-item"><a class="nav-link" href="/clients/categories/3">Tshirts </a></li>
      </ul>
      <ul class="navbar-nav ml-auto">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="#">
            Nelly
          </a>
          <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
            <a class="dropdown-item" href="/clients/myaddresses">Mes adresses</a>
            <a class="dropdown-item" href="/clients/orders">Mes commandes</a>
            <a class="dropdown-item" href="/clients/favorites">Mes favoris</a>
            <a data-no-turbolink="true" class="dropdown-item" rel="nofollow" data-method="delete" href="/users/sign_out">Déconnection</a>
          </div>
        </li>

        <li class="nav-link">
          <div class="icon-wrapper">
            <a href="/clients/cart">
              <i class="fa fa-shopping-bag"></i>  
            </a>       
          </div>
        </li>
        <li class="nav-link" style="margin-right: 20px; margin-bottom: 20px;">
          <div class="icon-wrapper">
            <a href="/clients/favorites">
              <i class="fa fa-heart nav-heart"></i>  
              <span id="likes_counter">3</span>
            </a>          
          </div>
        </li>
        <li class="nav-link">
          <a href="/admin/products">Site admin</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>