首页 > 解决方案 > 我在下拉列表中没有发现错误吗?

问题描述

我正在尝试显示此下拉列表,但单击任何内容时它不会下拉。我已经安装了 twitter bootrap gem...请指教。我试过玩宝石,但什么也没发生。nav我什至从 bootstrap.com复制了一个代码片段示例,但什么也没发生。

<nav class="navbar navbar-expand-lg navbar-transparent navbar-fixed-top " >
  <div class="container">
    <%= link_to "Recipes",root_path, class: "bt  btn-lg btn-success" ,id:"logo"%>
    <div class="nav_item">
        <%= link_to "Edit Profile",edit_user_registration_path, class:" btn btn-default btn-warning", style: 'margin-top: 10px;' %> 
    </div>
    

     <div class="nav_item">
        <%= link_to "Link one","", class:" btn btn-default btn-warning", style: 'margin-top: 10px;' %>
    </div>
     <div class="nav_item">
        <%= link_to "Link one","", class: "btn btn-default btn-warning", style: 'margin-top: 10px;' %>
    </div>
     <div class="nav_item">
        <%= link_to "New Recipe",new_recipe_path, class: "btn btn-default btn-warning", style: 'margin-top: 10px;' %>
    </div>
    <ul class= "nav_item">
      <li class= "dropdown">    
        <%= link_to '#', class:'btn btn-default btn-danger dropdown-toggle', 'data-toggle'=>'dropdown' do%>
            <%=current_user.name%><b class='caret'></b >
        <%end %>
        <ul class= 'dropdown-menu'>
          <li ><%= link_to "View profile", user_show_path(current_user)%></li>
          <li ><%= link_to "Edit profile", edit_user_registration_path %></li>
          <li class= 'divider'></li>
          <li ><%= link_to "New Recipe", new_recipe_path %></li>
          <li class= 'divider'></li>
          <li ><%= button_to "Log Out ", destroy_user_session_path %></li>
        </ul>
      </li>
    </ul>
  </div>
</nav>


  

标签: ruby-on-railstwitter-bootstrap

解决方案


您应该再次更好地查看 Bootstrap 文档。

如果您使用的是 v4:https ://getbootstrap.com/docs/4.0/components/navbar/

我认为您的课程有点偏离,例如nav_item应该是nav-item,您还缺少一个navbar-nav围绕您的<li> nav-item标签的无组织列表(nav-item dropdown如果您想要一个下拉列表等。我在您的代码中看到很多不正确的东西。

我也会避免在导航栏中使用容器 div。


推荐阅读