导航栏右侧低于品牌答案

【问题标题】：Navbar right falling below brand导航栏右侧低于品牌
【发布时间】：2016-11-28 17:41:26
【问题描述】：

我正在尝试创建一个导航栏，其中包含在 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 如下，我确实必须对其进行更改，以便设计的警报显示在导航栏下方，这可能是导致它的原因。我不认为是但是。

  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;
}

【问题讨论】：

如果没有工作示例，很难确定实际发生了什么，但请尝试将 ul.nav navbar-nav navbar-right 放在 div.navbar-header 内
不幸的是没有工作，我会尝试将它撕成一个没有 Rails 东西的静态准系统 HTML/CSS，看看这是否是某种原因。

标签： html css ruby-on-rails twitter-bootstrap devise

【解决方案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 会自动为您生成它们，因此您无需手动添加它们。它正在溢出，因为它试图添加四个链接而不是两个。与在 HTML 页面正文中生成的 Devise gem 无关。

【讨论】：