bootstrap loại bỏ mũi tên hướng lên trên trong danh sách thả xuống

Question

Tôi đang sử dụng bootstap trên Twitter và muốn loại bỏ mũi tên hướng lên trên thanh menu thả xuống nằm trong nav của tôi. Tôi không thể tìm thấy một tài liệu tham khảo trong 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

tôi sẽ không khuyên bạn nên chỉnh sửa file bootstrap.css. Bạn có thể ghi đè kiểu dáng trong biểu định kiểu tùy chỉnh để ẩn mũi tên cho thành phần đó như sau:

Với phương pháp này, bạn thậm chí có thể thực hiện ghi đè cho một menu thả xuống cụ thể. Ví dụ, nếu thả xuống của bạn là một đứa trẻ của một phần tử với id my_dropdown, bạn có thể làm:

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

Điều này sẽ cho phép bạn có một mũi tên cho Dropdowns khác, trong khi giấu nó cho thả xuống cụ thể này.

Answer 2

Các css sau làm việc cho tôi:

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

Nếu bạn loại bỏ bất kỳ của hai selectors, một số chi tiết từ mũi tên sẽ vẫn còn tồn tại - hoặc là một màu xám hoặc một hình tam giác màu trắng.

(Chỉ cần quyết định để thêm video này trong trường hợp ai đó đang tìm kiếm một câu trả lời sau, khi câu trả lời chấp nhận không làm việc cho tôi.)

Answer 3

Bạn cũng có thể làm:

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

chí này vô hiệu hóa mũi tên và bóng của nó.