Html 导航栏的引导Drowdown

我目前有一个常规导航栏，但我的链接开始变大，无法下拉。我想把两个链接放在一起，让它们下拉。对某人来说，这应该是一些简单的要点。这是一个屏幕截图和一些代码。我想把

发送的消息

和

预定的消息

合并成一个下拉列表

导航栏

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

：删除）%>

---

给你。导航栏中有行/列是有原因的吗？我可能会反对这样做

这基本上只是一个基本问题。唯一的区别是使用

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>

您可能需要添加汉堡包图标/链接以在移动显示器上切换导航栏

<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结构。

在这里。导航栏中有行/列是有原因的吗？我可能会反对这样做

这基本上只是一个基本问题。唯一的区别是使用

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>

您可能需要添加汉堡包图标/链接以在移动显示器上切换导航栏

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

切换导航

您可以在Bootstrap3上看到导航栏的整个HTML结构