bootstrap navbar Kollaps Links mit Ausnahme nicht floating links

Question

Hallo Ich möchte einen float keine in meiner Anwendung scss für alle a href aus der Navbar mit Ausnahme der Navbar-Marke, die die "Home" ist.

Das ist mein 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>

Und das ist mein application.scss:

@media (max-width: 769px) { 
 
    #top{ 
 
     padding-top: 40px; 
 
\t \t 
 
    } 
 
} 
 

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

Die Sache ist, dass, wenn ich schreibe:

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

Es tut, was ich will, mit dem Wasser keine Putting es funktioniert wie Art von Schwimmer verließ die alle a href nach links ausrichten. ABER, wie ich schon sagte, ich möchte nicht, dass es dasselbe mit dem Home a href tut, das die Klasse navbar-brand hat. Deshalb habe ich die a: not (.navbar-Marke) erfolglos ausprobiert.

Answer 1

Sie können eine separate Regel für Ihren Home-Menüeintrag mit der Klasse navbar-brand hinzufügen.

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