導航拖拽對於Navbar

我目前有一個常規的導航欄，但我的鏈接開始大，沒有下拉菜單。我想把兩個鏈接放在一起，並讓它們下拉。這對某個人來說應該是一些簡單的點這是一個屏幕截圖和一些代碼。我想將sent messages和scheduled messages合併爲一個下拉列表。導航拖拽對於Navbar

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>

來源

2016-04-11 Bitwise

這裏亞去。是否有你的導航欄中有行/列的原因？我可能會建議反對。

它本質上只是一個基本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>

您可以看到自舉3 at their docs導航欄的完整的HTML結構。

來源

2016-04-11 16:14:49

導航拖拽對於Navbar

回答

相關問題