Bootstrap導航欄折疊異常除外的鏈接

Question

您好，我想在我的應用程序scss中為導航欄上的所有href都設置浮點數，但導航欄品牌為“主頁”。

這是我的application.html.erb：

  <nav class="navbar navbar-default navbar-custom"> <div class="container"> <%= link_to "Home", root_path, class: "navbar-brand" %> <button class="navbar-toggle" data-toggle= "collapse" data-target=".navHeaderCollapse" > <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class="collapse navbar-collapse navHeaderCollapse" > <ul class="nav navbar-nav" id="top"> <li><%= link_to "Products", products_path %></li> <li><%= link_to "About the website", about_path %></li> </ul> <ul class="nav navbar-nav navbar-right"> <!-- the pull-right is like a float right --> <% if user_signed_in? %> <li><a><span class="current_user"> Current user: <%= @username %> </span></a></li> <li><%= link_to "Sign out", destroy_user_session_path, method: :delete %></li> <% else %> <li><a class="nav-link" data-toggle="modal" data-target="#login-modal">Log in</a></li> <li><a class="nav-link" data-toggle="modal" data-target="#signup-modal">Sign up</a></li> <% end %> </ul> </div> </div> </nav> 

這是我的application.scss：

 @media (max-width: 769px) { #top{ padding-top: 40px; } } @media (max-width: 769px) { a:not(.navbar-brand){ padding-top: 40px; float: none!important; } } 

問題是，如果我輸入：

 @media (max-width: 769px) { a{ padding-top: 40px; float: none!important; } } 

它實現了我想要的功能，通過不放置浮點數，它的工作方式類似於將所有a href對齊到左側的浮點數。 但是，正如我所說，我不希望它對具有navbar-brand類的Home a href做同樣的事情。 這就是為什么我沒有成功嘗試a：not（.navbar-brand）的原因。

Answer 1

您可以使用navbar-brand類為“主”菜單項添加單獨的規則。

@media (max-width: 769px) {
        a {
            float: none;
        }
        .navbar-brand {
            float: left;
        }
    }