我目前有一个常规的导航栏,但我的链接开始变大,没有下拉列表。我想将两个链接放在一起并使它们成为下拉菜单。这对某人来说应该是一些简单的要点。这是一个屏幕截图和一些代码。我想将已发送消息
和预定消息
合并为一个下拉列表。
导航栏。
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<%= link_to 'Tulip Time Text', root_path, class: "navbar-brand", id: "logo", title: 'Send a Message' %>
</div>
<ul class="nav navbar-nav navbar-left">
<li><%= link_to 'Numbers', people_path, title: 'Subscribers' %></li>
<li><%= link_to 'Sent Messages', messages_path, title: 'Received' %></li>
<li><%= link_to 'Scheduled Messages', scheduled_message_path, title: 'To Be Sent' %></li>
<li><%= link_to 'Statistics', subscribed_num_path, title: 'Total Number of Subscribers' %></li>
</ul>
<ul class="nav navbar-right col-md-4">
<% if current_user %>
<li class="col-md-8 user-name">
<%= link_to ('<i class="fa fa-user"></i> ' + truncate(current_user.email, length: 25)).html_safe,
edit_user_password_path, title: 'Edit Profile' %>
</li>
<li class="col-md-3 logout"><%= link_to('Logout', destroy_user_session_path,
class: 'btn btn-xs btn-danger', title: 'Logout', :method => :delete) %></li>
<% else %>
<li class="col-md-4 pull-right">
<%= link_to('Sign In', new_user_session_path, class: 'btn btn-primary', title: 'Sign In') %>
</li>
<% end %>
</ul>
最佳答案
给你。您的导航栏中有行/列是否有原因?我可能会反对这种做法。
它本质上只是一个基本的 dropdown .唯一的区别是您使用的不是 div
标签,而是 li
标签,因为您希望它位于您已经拥有的当前无序列表中。
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><%= link_to 'Sent Messages', messages_path, title: 'Received' %></li>
<li><%= link_to 'Scheduled Messages', scheduled_message_path, title: 'To Be Sent' %></li>
</ul>
</li>
下面是整个导航栏,排除列并为移动显示添加 collapse
类。注意:您需要添加汉堡包图标/链接...请参阅下面的 html。
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<%= link_to 'Tulip Time Text', root_path, class: "navbar-brand", id: "logo", title: 'Send a Message' %>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><%= link_to 'Numbers', people_path, title: 'Subscribers' %></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><%= link_to 'Sent Messages', messages_path, title: 'Received' %></li>
<li><%= link_to 'Scheduled Messages', scheduled_message_path, title: 'To Be Sent' %></li>
</ul>
</li>
<li><%= link_to 'Statistics', subscribed_num_path, title: 'Total Number of Subscribers' %></li>
</ul>
<ul class="nav navbar-right">
<% if current_user %>
<li class="user-name">
<%= link_to ('<i class="fa fa-user"></i> ' + truncate(current_user.email, length: 25)).html_safe, edit_user_password_path, title: 'Edit Profile' %>
</li>
<li class="logout">
<%= link_to('Logout', destroy_user_session_path, class: 'btn btn-xs btn-danger', title: 'Logout', :method => :delete) %>
</li>
<% else %>
<li class="pull-right">
<%= link_to('Sign In', new_user_session_path, class: 'btn btn-primary', title: 'Sign In') %>
</li>
<% end %>
</ul>
</div>
</div>
</nav>
您可能想要添加汉堡包图标/链接以在移动设备显示屏上切换导航栏...
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
您可以在 Bootstrap 3 上看到导航栏的整个 HTML 结构 at their docs .
关于html - 导航栏的 Bootstrap 下拉菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36553746/