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

Question

我有两个 navbar 元素，它们是使用bootstrap中的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应该能够独立处理的东西吗？

Answer 1

我会使用一个导航栏右键并将您想要的代码放在其中。

newrecord