css - 如何使用 active_link_to 将边框直接定位在事件链接上？ rails 4

Question

我目前正在使用 active_link_to 来跟踪导航栏链接状态的变化。当我为事件状态添加样式时，它看起来像下图。我想将事件状态边框推到链接的顶部。 Twitter 的导航栏是我一直尝试实现的样式的一个很好的例子。最后，当一个链接应该只显示边框事件状态时，似乎导航栏的所有状态当前都处于事件状态。

Awesome Font Icon Nav-Item with top-border floating to the right

HTML

<nav class="navbar navbar-dark navbar-full navbar-fixed-top bg-inverse" style="font-size: 18px;">
  <a class="navbar-brand" href="#"><%= image_tag 'logo.png' %></a>
  <ul class="nav navbar-nav navbar-properties">
    <% if user_signed_in? %>
        <li class="nav-item">
          <%= active_link_to awesome_link 'fa fa-home fa-3x', home_path, :class => 'nav-item nav-link', title: 'Home', style: 'color: white' %>
        </li>
        <li class="nav-item">
          <%= active_link_to awesome_link 'fa fa-commenting-o fa-3x', news_user_path(current_user), :class => 'nav-item nav-link', title: 'News', style: 'color: white' %>
        </li>
        <li class="nav-item">
          <%= active_link_to awesome_link 'fa fa-globe fa-3x', discovery_index_path, :class => 'nav-item nav-link', title: 'Discovery', style: 'color: white' %>
        </li>
        <li class="nav-item">
          <%= active_link_to awesome_link 'fa fa-list-alt fa-3x', notifications_user_path(current_user), :class => 'nav-item nav-link', title: 'Notifications', style: 'color: white' %>
        </li>
        <li class="nav-item">
          <%= active_link_to awesome_link 'fa fa-envelope-o fa-3x', conversations_path, style: 'color: white;', title: 'Mailbox', :class => 'nav-item nav-link' %>
        </li>
        <li class="nav-item">
          <%= active_link_to awesome_link 'fa fa-newspaper-o fa-3x', assignments_path, style: 'color: white;', title: 'Assignments', :active => [['assignments'], []], :class => 'nav-item nav-link' %>
        </li>
        <li class="pull-right account-button-push">
          <div class="btn-group" role="group">
            <a type="button" class="btn btn-secondary-outline dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="margin-left: 12px;"><i class="fa fa-user fa-fw"></i>
              Account</a>

            <div class="dropdown-menu dropdown-menu-right">
              <a><%= link_to 'Edit Account', edit_user_registration_path(current_user), style: 'text-decoration: none; text-align: center;', class: 'dropdown-item' %></a>
              <div class="dropdown-divider">
              </div>
              <a><%= link_to 'Profile Settings', user_setting_path(current_user), :class => 'dropdown-item', style: 'text-align: center' %> </a>
              <div class="dropdown-divider"></div>
              <a><%= link_to 'Subscription', new_subscription_path(current_user), :class => 'dropdown-item', style: 'text-align: center' %></a>
              <div class="dropdown-divider"></div>
              <a><%= active_link_to 'Sign out', destroy_user_session_path, :method => :delete, :class => 'dropdown-item', strong: true, style: 'text-align: center' %></a>
            </div>
          </div>
        </li>
        <li class="pull-right">
          <%= active_link_to new_post_path, :class => 'btn btn-success', style: 'line-height: -4px;', remote: true, data: { :toggle => 'modal', :target => '#myModal'} do %>
              <div style="margin-top:4px;"><i class="fa fa-crosshairs"></i> New Experience</div>
          <% end %>
        </li>
        <li class="pull-right round-image-50-placement-fix">
          <%= link_to(image_tag(current_user.avatar_url(:thumb), class: 'round-image-50'), current_user) %>
        </li>
    <% else %>
        <li class="nav-item">
          <%= active_link_to awesome_link 'fa fa-home fa-2x', home_path, :class => 'nav-item nav-link', title: 'Home', style: 'color: white' %>
        </li>
        <li class="nav-item">
          <%= active_link_to awesome_link 'fa fa-sign-in fa-2x', login_path, :class => 'nav-item nav-link', title: 'Sign in' %>
        </li>
        <li class="nav-item">
          <%= active_link_to awesome_link 'fa fa-user-plus fa-2x', new_user_registration_path, :class => 'nav-item nav-link', title: 'Register' %>
        </li>
        <li class="nav-item">
          <%= active_link_to awesome_link 'fa fa-info fa-2x', about_path, :class => 'nav-item nav-link', title: 'About' %>
        </li>
    <% end %>
  </ul>
</nav>

Awesome_link 生成下面的链接标签

<a href="/"><i class="fa fa-arrow-circle-o-up"></i></a>

CSS

 nav a.active {
      border-style: solid;
      border-top: thick solid #27CCC0;
    }

Answer 1

我想知道您是否可以对同一个链接同时使用 active_link_to 和 awesome_link，因为它们都生成 a 元素。

  <li class="nav-item">
          <%= active_link_to awesome_link 'fa fa-home fa-3x', home_path, :class => 'nav-item nav-link', title: 'Home', style: 'color: white' %>
        </li>

将上面的替换为

  <li class="nav-item">
          <%= active_link_to '<i class="ffa fa-home fa-3x" style="color:white"></i>', home_path, :class_active => 'nav-link active', :class_inactive => 'nav-link' %>
    </li>