javascript - Bootstrap 导航栏折叠链接，异常不向左浮动

Question

你好，我想在我的应用程序 scss 中为导航栏中的所有 a href 创建一个 float none，但导航栏品牌除外，它是“主页”。

这是我的 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 none 置为 none，它的工作方式类似于将所有 a href 左对齐的 float left。但是，正如我所说，我不希望它对具有导航栏品牌类的 Home a href 做同样的事情。这就是为什么我尝试 a:not(.navbar-brand) 但没有成功的原因。

Answer 1

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

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