Bootstrap Drowdown für Navbar

Question

Ich habe derzeit eine normale Navbar, aber meine Links beginnen zu groß, um ohne ein Dropdown zu halten. Ich möchte zwei Links zusammenbringen und sie zum Dropdown-Menü machen. Dies sollte einige einfache Punkte für jemanden sein. Hier ist ein Screenshot und etwas Code. Ich würde gerne sent messages und scheduled messages zusammenbringen, um ein Dropdown zu sein.

Navbar.

<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

hier ya gehen. Gibt es einen Grund, warum Sie Zeilen/Spalten in Ihrer Navigationsleiste haben? Ich würde es wahrscheinlich eher empfehlen.

Es ist im Wesentlichen nur eine einfache dropdown. Der einzige Unterschied besteht darin, dass Sie anstelle des Tags div das Tag li verwenden, weil Sie möchten, dass dies innerhalb der aktuellen ungeordneten Liste liegt, die Sie bereits haben.

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

Im Folgenden finden Sie die gesamte navbar, die Spalten gewählte Art und Hinzufügen der collapse Klasse für mobile Displays. Hinweis: Sie müssten das Hamburger Icon/Link hinzufügen ... siehe unten für 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> 

Sie werden wahrscheinlich die Hamburger Symbol/Link zum Umschalten der navbar auf mobilen Displays ...

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

Sie können sehen, die gesamte HTML-Struktur der navbar auf Bootstrap 3 at their docs hinzufügen möchten .