为什么我的两个导航栏右侧元素重叠？

Question

我有两个 navbar 元素，它们打算使用 bootstrap 中的 navbar-right class 并排放置。当我只在 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 应该能够自行处理的事情？

Answer 1

我会使用单个导航栏右侧并将您想要的代码放入其中。

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

为什么我的两个导航栏右侧元素重叠？

Why are my two navbar-right elements overlapping?

css

ruby-on-rails

navbar

twitter-bootstrap