为什么我的两个 navbar-right 元素重叠？答案

【问题标题】：Why are my two navbar-right elements overlapping?为什么我的两个 navbar-right 元素重叠？
【发布时间】：2015-12-22 22:02:24
【问题描述】：

我有两个 navbar 元素，它们打算并排使用引导程序中的 navbar-right 类。当我仅在 ul 上使用 Bootstrap 时，它可以很好地处理间距。但是，当我尝试将div 浮动到右侧，然后将ul 浮动到右侧时，我最终会出现一些重叠。

以下是我所说的图片：

这是我的代码：

<div class="collapse navbar-collapse" id = "main-nav-collapse">
  <div class="nav navbar-nav navbar-right">
    <% if current_user %>
      <%= button_to "Sign Out", destroy_user_session_path, method: :delete, class: "btn btn-primary navbar-btn" %>"
    <% else %>
      <%= link_to "Log In", new_user_session_path, class: "btn btn-primary navbar-btn", method: :get %>
      <%= link_to "Sign Up", new_user_registration_path, class: "btn btn-success navbar-btn", method: :get %>
    <% end %>
  </div>
  <ul class="nav navbar-nav navbar-right">
    <li><%= link_to "About", about_path %></li>
    <li><%= link_to "Contact Us", new_contact_path %></li>
  </ul>
</div> <!-- /.navbar-collapse -->

有什么克服这个问题的建议吗？我可以将 CSS 添加到带有边距的玩具中，但这似乎是 Bootstrap 应该能够自己处理的东西？

【问题讨论】：

您应该首先花时间将您的 HTML 输出 添加到 Snippet 中，以便其他人有您的代码的工作示例，Ruby 在这种情况下没有用处。见minimal reproducible example。
修复代码高亮，移除粗体样式

标签： css ruby-on-rails twitter-bootstrap navbar

【解决方案1】：

我会使用一个 navbar-right 并将您想要的代码放入其中。

<div class="collapse navbar-collapse" id = "main-nav-collapse">
  <div class="nav navbar-nav navbar-right">
    <% if current_user %>
      <%= button_to "Sign Out", destroy_user_session_path, method: :delete, class: "btn btn-primary navbar-btn" %>"
    <% else %>
      <%= link_to "Log In", new_user_session_path, class: "btn btn-primary navbar-btn", method: :get %>
      <%= link_to "Sign Up", new_user_registration_path, class: "btn btn-success navbar-btn", method: :get %>
    <% end %>
    <ul class="nav navbar-nav">
      <li><%= link_to "About", about_path %></li>
      <li><%= link_to "Contact Us", new_contact_path %></li>
    </ul>
  </div>
</div> <!-- /.navbar-collapse -->

【讨论】：

感谢亚伦的帮助