bootstrap remove upward arrow in dropdown

Question

Я использую загрузку Twitter и хочу удалить стрелку вверх в раскрывающемся меню, которое находится в моем навигаторе. Я не могу найти ссылку в bootstrap.css.

.navbar .dropdown-menu:after { 
content: ''; 
display: inline-block; 
border-left: 6px solid transparent; 
border-right: 6px solid transparent; 
border-bottom: 6px solid #000; /* change color here, modified for a black arrow */ 
position: absolute; 
top: -6px; 
left: 10px; 
} 

Answer 1

Я бы не рекомендовал вам редактировать файл bootstrap.css. Вы можете перезаписать стиль в пользовательской таблице стилей, чтобы скрыть стрелку для этого компонента, как это:

.dropdown-menu:after { 
    border: none !important; 
    content: "" !important; 
} 

С помощью этого метода вы можете даже сделать перезапись только для конкретного выпадающего списка. Например, если ваш выпадающий был ребенком элемента с идентификатором my_dropdown, вы могли бы сделать:

#my_dropdown .dropdown-menu:after { 
    border: none !important; 
    content: "" !important; 
} 

Это позволит вам иметь стрелу для других выпадающих, скрывая его для этого конкретного выпадающего списка.

Answer 2

Следующая CSS работал для меня:

.dropdown-menu:before, 
.dropdown-menu:after { 
    border: none !important; 
    content: none !important; 
} 

Если удалить какой-либо из двух селекторов, некоторые детали от стрелки еще останется - либо серый или белый треугольник.

(Просто решил добавить это в случае, если кто-то ищет ответ позже, так как принятый ответ не работает для меня.)

Answer 3

Вы также можете сделать:

.dropdown-menu:before, 
.dropdown-menu:after { 
    display:none; 
} 

Это будет отключите стрелку и ее тень.