我的导航栏中有一个烦人的链接,该链接不会与其他链接分开。登录我的网络应用时,标头包含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

最佳答案

您应该使用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>

关于html - CSS分隔导航栏中的链接,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/42494922/

10-12 12:33
查看更多