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>

CSS用于分隔Navbar中的链接

1 个答案: