自举导航栏ul位置

时间:2018-06-24 13:40:20

标签: node.js html5 bootstrap-4

有关问题的图片,请访问https://i.gyazo.com/04984efdfb4334e3818aab8252fa5e4e 我遇到的问题是,当我添加if(!currentUser)时,它会推动登录并向左注册,如上图所示。完整的Navbar代码如下。 谢谢您的帮助!

<div class="collapse navbar-collapse" id="dropdown">
  <ul class="navbar-nav mr-auto">
    <%if (!currentUser){%>
    <li class="nav-item">
      <a class="nav-link" href="/campground">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="/campground">Campgrounds</a>
    </li> 
  </ul>
  <ul class="navbar-nav ml-auto">
    <li class="nav-item">
      <a class="nav-link" href="/login">Login</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="/signup">Sign up</a>
    </li> 

    <% } else if (currentUser && currentUser.isAdmin){ %>
    <li class="nav-item">
      <a class="nav-link" href="/campground">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="/campground">Campgrounds</a>
    </li> 
     <li class="nav-item">
      <a class="nav-link" href="/campground/new">Add a Campground</a>
    </li>
    </ul>
     <% }else{ %>
    <li class="nav-item">
      <a class="nav-link" href="/campground">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="/campground">Campgrounds</a>
    </li> 
     <li class="nav-item">
      <a class="nav-link" href="/campground/new">Add a Campground</a>
    </li>
    <% } %>
    </ul>
    <ul class="navbar-nav ml-auto">
      <%if(!currentUser){%>

      <% } else{%>
    <li class="nav-item">
     <a class="nav-link" href="">Logged in as: <%= currentUser.username%></a>
    </li> 
    <li class="nav-item">
      <a class="nav-link" href="/logout">Logout</a>
    </li>
    <% } %>
  </ul>
</div>

0 个答案:

没有答案