Bootstrap导航栏会折叠链接，但不会浮动异常

Question

您好我想在我的应用程序scss中创建一个浮点数来获取导航栏中的所有href，除了navbar-brand是“Home”。

这是我的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;
    		
        }
    }   

它做了我想做的事情，通过放置float，它就像浮动一样，将所有a href对齐到左边。但是，正如我所说，我不希望它与具有类navbar品牌的家庭href一样。这就是为什么我没有成功的尝试a：not（.navbar-brand）。

Answer 1

您可以使用课程navbar-brand为主菜单项添加单独的规则。

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