Question

我希望我的导航栏在所有页面/视图上都有白色背景，但在我的主页上除外。我希望我的导航栏在主页上是透明背景。有没有办法在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

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

在您的首页视图中添加到顶部：

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

在您的标头文件中：

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

在你的scss文件中：

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

Bootstrap Navbar，仅在一个视图上更改背景颜色

1 个答案: