css - Bootstrap Navbar，仅在一个 View 上更改背景颜色

Question

我希望我的导航栏在所有页面/ View 上都有白色背景，但我的主页除外。我希望我的导航栏在主页上成为透明背景。有没有办法在 Bootstrap 中实现这一点？

我正在使用 bootstrap 作为前端的 Rails 应用。

<nav class="navbar navbar-default">
  <div class="container yeh">
    <!-- Brand and toggle get grouped for better mobile display -->
   <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false" style="margin-top:3px;">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">MyAPP</a>
    </div>

    <div class="navbar-container-right">

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

        <ul class="nav navbar-nav navbar-right">

          <li class="dropdown">
            <%= link_to 'Investments', proposals_path %>
          </li>
          <li>
            <%= link_to 'Community', users_path %>
          </li>
          <% if current_user.present? %>
          <li>
            <%= link_to 'Dashboard', dashboard_path %>
          </li>
          <li>
            <%= link_to 'Edit Profile', edit_user_path(current_user) %>
          </li>
          <li>  
            <%= link_to 'Sign Out',destroy_user_session_path, :method => :delete %>
          </li>
          <% else %>
          <li>
            <%= link_to 'Sign In', new_user_session_path %>
          </li>
          <li>
            <%= link_to 'Register Now!', new_user_registration_path %>
          </li>
          <% end %>

        </ul>
    </div>

    </div>
  </div>
</nav>

Answer 1

实现此目的的一种方法是为主页添加一个自定义类，将样式设置为透明。例如，您可以执行以下操作:

在您的主页 View 中添加到顶部:

<% provide(:nav_style, "transparent-nav") %>

在你的头文件中:

<nav class="navbar navbar-default <%= yield(:nav_style) %>">

在你的 scss 文件中:

.navbar-default{
      background-color: white;
    &.transparent-nav {
      background-color: transparent;
    }
}