Navbar正好落在品牌之下

Question

我正在尝试使用Ruby on Rails中生成的两个链接创建一个导航栏。目前，我们非常想在左侧制作品牌，并在右侧登录/注册或注销/发布广告。但是，我的右侧导航栏正在新线下方。就像导航栏的宽度不足以容纳所有项目一样。

以下是我所描述的截图....

正确的导航栏落在品牌之下。

index.html.erb

<nav class="navbar navbar-default navbar-static-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">SHIP LIST</a>
    </div>
    <ul class="nav navbar-nav navbar-right">
      <% if user_signed_in?%>
      <li><a href="#"><%= link_to 'post ad', new_listing_path %></a></li>
      <li><a href="#"><%= link_to 'log out', destroy_user_session_path, :method => :delete %></li>
      <% else %>
      <li><a href="#"><%= link_to 'sign up', new_user_registration_path %></li>
      <li><a href="#"><%= link_to 'log in', new_user_session_path %></li>
      <% end %>
    </ul>
  </div>

我的css如下，我确实需要对其进行更改，因此Devise的警报显示在导航栏下方，因此可能会导致它。我认为不是。但

  body {
    font-size: 62.5%;
    font-family: Helvetica, sans-serif;
  }

.alert-box {
  color:#555;
  border-radius:10px;
  font-family:Tahoma,Geneva,Arial,sans-serif;font-size:11px;
  padding:10px 10px 10px 36px;
  margin:10px;
  span {
    font-weight:bold;
    text-transform:uppercase;
  }
}
.danger {
    background:#ffecec url('images/error.png') no-repeat 10px 50%;
    border:1px solid #f5aca6;
}
.success {
    background:#e9ffd9 url('images/success.png') no-repeat 10px 50%;
    border:1px solid #a6ca8a;
}
.warning {
    background:#fff8c4 url('images/warning.png') no-repeat 10px 50%;
    border:1px solid #f2c779;
}
.notice {
    background:#e3f7fc url('images/notice.png') no-repeat 10px 50%;
    border:1px solid #8ed9f6;
}

Answer 1

使用以下与右侧导航栏相关的代码...

<ul class="nav navbar-nav navbar-right">
  <% if user_signed_in?%>
  <li><a href="#"><%= link_to 'post ad', new_listing_path %></a></li>
  <li><a href="#"><%= link_to 'log out', destroy_user_session_path, :method => :delete %></li>
  <% else %>
  <li><a href="#"><%= link_to 'sign up', new_user_registration_path %></li>
  <li><a href="#"><%= link_to 'log in', new_user_session_path %></li>
  <% end %>
</ul>

删除链接标签，如此...

<ul class="nav navbar-nav navbar-right">
  <% if user_signed_in?%>
  <li><%= link_to 'post ad', new_listing_path %></a></li>
  <li><%= link_to 'log out', destroy_user_session_path, :method => :delete %></li>
  <% else %>
  <li><%= link_to 'sign up', new_user_registration_path %></li>
  <li><%= link_to 'log in', new_user_session_path %></li>
  <% end %>
</ul>

Rails会自动为您生成它们，因此您不需要像手动那样添加它们。当它试图添加四个链接而不是两个链接时，它溢出了。与Devise gem无关，它是在HTML页面的主体中生成的。