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這個繼承問題。