Navbar的Bootstrap Drowdown

Question

我目前有一个常规的导航栏，但我的链接开始很大而没有下拉列表。我想把两个链接放在一起，让它们下拉。对于某人来说，这应该是一些简单这是一个屏幕截图和一些代码。我想将sent messages和scheduled messages放在一起作为一个下拉列表。

导航栏。

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

 

Answer 1

你去吧。导航栏中是否有行/列？我可能会建议不要这样做。

它基本上只是一个基本dropdown。唯一的区别是使用ALTER TABLE tablename ORDER BY columnname ASC;标记，而不是使用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> 类。注意：您需要添加汉堡包图标/链接...请参阅下面的html。

collapse

您可能想要添加汉堡包图标/链接以切换移动显示屏上的导航栏...

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

您可以在Bootstrap 3 at their docs上看到导航栏的整个HTML结构。