Ruby on Rails：如何防止单击的 link_to_current_unless 出现在导航栏之外？答案

【问题标题】：Ruby on Rails: How Do I Keep a Clicked link_to_current_unless from appearing outside of the Nav Bar?Ruby on Rails：如何防止单击的 link_to_current_unless 出现在导航栏之外？
【发布时间】：2017-05-21 17:05:12
【问题描述】：

我有一个导航栏，其中包含几个右对齐的链接以及两个区域设置链接，它们位于品牌名称右侧，当它不是特定 URL 时显示。当我单击右对齐的链接时，链接保持在同一位置。当我单击左侧的区域设置链接之一时，我单击的链接显示为已单击，但它位于导航栏上方。

这是网站最初显示时屏幕的样子。

这是单击法语链接时屏幕的外观。可能很难看到，但法语链接以略大的字体显示，并带有下划线。当我单击它们时，我希望它看起来像右侧的链接。

这是导航栏的代码。我还在容器流体 div 和两个 div 之间有 if 语句。我仍然得到相同的结果。

<!-- Navigation -->
<nav class="navbar navbar-default navbar-custom navbar-fixed-top">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header page-scroll">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <%= link_to "#{t :geometry3d2d}", locale_root_path, class: "navbar-brand"  %>
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">    

      <% if "#{request.host_with_port}" == "myrequesthost" %>
      <% else %>
        <ul class="nav navbar-nav">
          <li><%= link_to_unless_current "#{t :english}", locale: "en" %></li>
          <li><%= link_to_unless_current "#{t :french}", locale: "fr" %></li>
        </ul>
      <% end %>

      <ul class="nav navbar-nav navbar-right">
        <li><%= link_to "#{t :link_home}", locale_root_path %></li>
        <li><%= link_to "#{t :link_store}", store_path %></li>
        <li><%= link_to "#{t :link_books}", store_path(anchor: "#{t :books}") %></li>
        <li><%= link_to "#{t :link_tesserart}", store_path(anchor: "tesserart") %></li>
        <li><%= link_to "#{t :link_affiliates}", affiliates_path %></li>
        <li><%= link_to "#{t :link_geometry}", geometry_path %></li>
        <li><%= link_to "#{t :link_terms}", terms_path %></li>
        <li><%= link_to "#{t :link_vision}", locale_root_path(anchor: "vision") %></li>
        <li><%= link_to "#{t :link_contact}", contact_path %></li>
      </ul>
    </div>
  </div>
</nav>
<%= content_tag(:div, content_tag(:a, "", id: "top"), class: "anchor") %>

我在网络搜索中没有找到与此问题相关的任何内容。 if 语句中的<ul> 与另一个之间的唯一区别是：（1）我使用link_to_unless_current 而不是link_to 和（2）我不包括navbar-right 类。我希望添加一个类可以解决这个问题，但不知道去哪里找。

【问题讨论】：

看起来点击正在添加一个更改该元素的颜色和边距/填充的类（可能是活动的或其他什么？）。您是否检查过这些样式的来源？
我在视图、样式表和 javascript 中进行了搜索，但没有找到对 current.xml 的任何引用。这就是我提交问题的原因。我以为我错过了什么。通过重新阅读我在问题中发布的差异，我发现了发生了什么。

标签： ruby-on-rails twitter-bootstrap-3 navbar nav

【解决方案1】：

我通常使用link_to_unless_current 选定的语言环境链接受到保护，其他语言环境链接显示为链接。该功能对这个项目并不重要。

我决定再看看我在<ul> 声明中注意到的差异。我决定将link_to_unless_current 更改为link_to 看看发生了什么。区域设置链接的行为类似于导航栏右侧的链接，并在英语和法语之间切换。

【讨论】：