Twitter Bootstrap响应菜单添加下拉怪异箭头

Question

我不明白为什么这是与我的响应twitter引导程序导航发生。下面是截图：

https://www.evernote.com/shard/s3/sh/79b436f8-822c-4fdc-ad36-a1d706686d05/3a735fc948474e109c08b773f01f0cf8

它添加那些指向了奇怪的箭头。插入符号是有意的，这些都可以。如果我从<li class="dropdown">中删除所有dropdown类，它将消失。但这样做会破坏导航。否则，导航工作很好。这里是我的标记：

<div class="navbar navbar-fixed-top"> 
    <div class="navbar-inner"> 
    <div class="container"> 
     <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </a> 
     <%= link_to "Tip Share", root_path, :class => "brand" %> 

     <div class="nav-collapse"> 

       <ul class="nav pull-left"> 
        <% if current_user %> 
         <li class="dropdown"> 
          <a href="#"class="dropdown-toggle" data-toggle="dropdown"> 
          Sales 
           <span class="caret"></span> 
          </a> 
          <ul class="dropdown-menu"> 
           <li><%= link_to "New Sales", new_sale_path %></li> 
           <li><%= link_to "Manage Sales", sales_path %></li> 
          </ul> 
         </li> 

         <li class="dropdown"> 
          <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
          Shifts 
           <span class="caret"></span> 
          </a> 
          <ul class="dropdown-menu"> 
           <li><%= link_to "New Shift", new_shift_path %></li> 
           <li><%= link_to "Manage Shifts", shifts_path %></li> 
          </ul> 
         </li> 

         <li class="dropdown"> 
          <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
          Employees 
           <span class="caret"></span> 
          </a> 
          <ul class="dropdown-menu"> 
           <li><%= link_to "New Employee", new_employee_path %></li> 
           <li><%= link_to "Manage Employees", employees_path %></li> 
          </ul> 
         </li> 

         <li class="dropdown"> 
          <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
          Positions 
           <span class="caret"></span> 
          </a> 
          <ul class="dropdown-menu"> 
           <li><%= link_to "New Position", new_position_path %></li> 
           <li><%= link_to "Manage Positions", positions_path %></li> 
          </ul> 
         </li> 
        <% end %> 
       </ul> 

       <ul class="nav pull-right"> 
        <% if current_user %> 
         <li> 
         <%= link_to root_path do %> 
         <%= current_user.email %> 
        <% end %> 
        </li> 
        <li><%= link_to 'Log out', logout_path %></li> 
        <% else %> 
        <li><%= link_to 'Sign up', signup_path %></li> 
        <li><%= link_to 'Log in', login_path %></li> 
        <% end %> 
       </ul> 
     </div> 
    </div> 
    </div> 
</div> 

看起来这个标记没什么问题，但我不断收到这些小箭头。我宁愿指出我在做什么错误的自举比试图用css覆盖它

我该如何摆脱这些箭？

仅供参考，我正在使用bootstrap-sass gem导入twitter引导程序。

Answer 1

添加.navbar-内给它足够的特异性工作：

/* Landscape phone to portrait tablet */ 
@media (max-width: 767px) { 
    .navbar .navbar-inner .nav > li > .dropdown-menu:after { 
     display: none; 
    } 
}/* end media query */ 

但是，我觉得很奇怪的是被默认包含在自举的规则不起作用：

.navbar .nav > li > .dropdown-menu:after 

Answer 2

它看起来像真正的问题是我的媒体查询特定的样式不起作用。这实际上是内置自举：

/* line 112, ../../../../../.rvm/gems/ruby-1.9.3-p194@tips/gems/bootstrap-sass-2.1.0.0/vendor/assets/stylesheets/bootstrap/_responsive-navbar.scss */ 
    .nav-collapse .dropdown-menu:before, 
    .nav-collapse .dropdown-menu:after { 
    display: none; 
    } 

但是风格不被认可，即使我的浏览器是远远低于979px：

https://www.evernote.com/shard/s3/sh/229f1ad6-99eb-4659-8e27-28950e9eb1db/36b7738b5c45a8d439dd39ef39fb5c77

所以它似乎是引导媒体查询的问题这没有意义。我想知道这是否与轨道中的资产管道有关。

---

更新：

添加此修复它：

/* Landscape phone to portrait tablet */ 
@media (max-width: 767px) { 
    .navbar .nav > li > .dropdown-menu:after { 
     display: none !important; 
    } 

}/* end media query */ 

但是!important实在是太差了。试图找出我做错了什么，会导致我的CSS这个继承问题。