CSS來分隔導航欄中的鏈接

Question

在我的導航欄中出現了一個惱人的鏈接，它不會與其他鏈接分開。登錄到我的網絡應用程序時，標題包含2個鏈接，在屏幕查看模式下不會分開（移動視圖很好）。鏈接是「我的儀表板」和「註銷」（登錄時）;和登錄和註冊（如果沒有登錄）：

.navbar { 
 
    border-radius:0; 
 
    font-family: "Helvetica Neue", Helvetica; 
 
    font-weight: 200; 
 
    box-shadow: 0px 1px 3px #2a2a2a; 
 
    background: image_url('dark_wood.png'); 
 
} 
 

 
.navbar a{ 
 
    font-size: 300%; 
 
} 
 

 
.navbar-header { 
 
    padding-top: 25px; 
 
    height: 85px; 
 
} 
 

 
.navbar-dark a.navbar-brand { 
 
    font-family: "Helvetica Neue", Helvetica; 
 
    font-weight: 100; 
 
    font-size: 400%; 
 
    color:white; 
 
}

 <nav class="navbar navbar-dark bg-inverse"> 
 
     <div class="navbar-header"> 
 
      <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="true" aria-label="Toggle navigation"> 
 
      <i class="fa fa-bars fa-2x" aria-hidden="true"></i>  
 
      </button> 
 
     </div> 
 
     <div class="collapse navbar-toggleable-md" id="navbarResponsive"> 
 
      <a class="navbar-brand" href="<%= root_path %>">Flixter</a> 
 
      <ul class="nav navbar-nav"> 
 
      <li class="nav-item"> 
 
       <%= link_to 'See All Courses', courses_path %> 
 
      </li> 
 
      </ul> 
 
      <ul class="nav navbar-nav"> 
 
      <% if user_signed_in? %> 
 
       <li class="nav-item"> 
 
       <%= link_to 'My Dashboard', dashboard_path %> 
 
       </li> 
 
       <li class="nav-item"> 
 
       <%= link_to 'Sign out', destroy_user_session_path, method: :delete %> 
 
       </li> 
 
      <% else %> 
 
       <li class="nav-item"> 
 
       <%= link_to 'Sign in', new_user_session_path, class: 'nav-link' %> 
 
       </li> 
 
       <li class="nav-item"> 
 
       <%= link_to 'Sign up', new_user_registration_path, class: 'nav-link' %> 
 
       </li> 
 
      <% end %> 
 
      </ul>   
 
     </div> 
 
     </nav>

這是我在你需要的情況下repo。

Answer 1

你應該使用jQuery的移動庫，他們應該給你一個平坦的佈局，而不使用所有的CSS。你可以去圖書館的w3schools。然後你可以試試這個。

<div data-role="navbar"> 
    <ul> 
    <li><a href="link here">Page one</a></li> 
    <li><a href="link here">Page Two</a></li> 
    <li><a href="slink here">Page Three</a></li> 
    </ul> 
</div>