Làm thế nào để loại bỏ mũi tên trong trình đơn thả xuống trong Bootstrap 4?

Tôi đang sử dụng Bootstrap 4. Tôi đã cố xóa mũi tên trong menu thả xuống.

Các câu trả lời tôi tìm thấy cho Bootstrap 3 không hoạt động nữa.

Jsfiddle là ở đây .

<div class="dropdown open">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
  </div>
</div>

Chỉ cần xóa lớp "dropdown-toggle" khỏi phần tử. Menu thả xuống sẽ vẫn hoạt động nếu bạn có thuộc tính chuyển đổi dữ liệu như sau

<button role="button" type="button" class="btn" data-toggle="dropdown"> 
    Dropdown Without Arrow
</button>

ghi đè các kiểu lớp .dropdown-toggle ảnh hưởng đến tất cả các menu thả xuống và bạn có thể muốn giữ mũi tên ở các nút khác, đó là lý do tại sao đây là giải pháp đơn giản nhất.

Chỉnh sửa: Giữ lớp thả xuống nếu bạn muốn giữ kiểu viền

<button role="button" type="button" class="btn dropdown" data-toggle="dropdown"> 
    Dropdown Without Arrow
</button>

Với css, bạn chỉ có thể làm điều đó:

.dropdown-toggle::after {
    display:none;
}

Tôi không đề xuất bất kỳ câu trả lời hiện có nào vì:

• .dropdown-togglecó nhiều kiểu dáng hơn chỉ là dấu mũ. Xóa lớp khỏi phần tử gây ra các vấn đề về kiểu dáng .

• Ghi đè .dropdown-togglekhông có ý nghĩa. Chỉ vì bạn không cần dấu mũ trên một số phần tử cụ thể, không có nghĩa là bạn sẽ không cần dấu mũ sau này.

• ::afterkhông bao gồm các biến thể thả xuống (một số sử dụng ::before).

Sử dụng một tùy chỉnh .caret-offtrong cùng một phần tử với .dropdown-togglephần tử của bạn :

.caret-off::before {
    display: none;
}
.caret-off::after {
    display: none;
}

loại bỏ lớp "dropdown-toggle"

Nếu bạn quan tâm đến việc thay thế mũi tên bằng một Biểu tượng khác (chẳng hạn như FontAwesome), bạn chỉ cần xóa đường viền trên phần tử giả của .dropdown-toggle

.dropdown-toggle::after { border: none; }

Tôi đã sử dụng câu trả lời được chấp nhận khá lâu trong dự án của mình nhưng vừa rồi tình cờ gặp một biến được bootstrap sử dụng :

$enable-caret: true !default;

Nếu bạn đặt giá trị này thành false thì dấu mũ sẽ bị xóa mà không cần phải thực hiện bất kỳ mã tùy chỉnh nào.

Dự án của tôi là Ruby / Rails nên tôi đang sử dụng bootstrap-rubygem . Tôi đã thay đổi biến bằng cách nhập custom-variables.scssvới bộ biến trên false trong tôi application.scss TRƯỚC các bootstrap.scsstập tin / file.

Nếu bạn loại bỏ phù hợp với lớp chuyển đổi thả xuống như bên dưới, tất cả các nút thả xuống trên hệ thống của bạn sẽ không còn dấu mũ nữa.

.dropdown-toggle::after {
    display:none;
}

Nhưng có lẽ đó không phải là những gì bạn muốn, vì vậy để chỉ loại bỏ một nút cụ thể, chúng tôi sẽ chèn một lớp có tên: remoecaret và chúng tôi sẽ phù hợp với lớp: dropdown-toggle như sau:

.removecaret.dropdown-toggle::after {
    display: none;
}

và html của chúng tôi trông giống như sau:

<div class="btn-group">
  <button class="btn btn-outline-secondary btn-sm dropdown-toggle removecaret" data-toggle="dropdown">
    <i class="fa fa-bars" aria-hidden="true"></i>
  </button>
  <ul class="dropdown-menu dropdown-menu-right">
    <li><a href="#"><a href="#"><i class="fa fa-cog" aria-hidden="true"></i>&nbsp;Edit</a></li>
  </ul>
</div>

Boostrap tạo điều này bằng cách sử dụng đường viền CSS:

.dropdown-toggle:after {
  border: none;
}

Nếu bạn chỉ muốn chính xác trong lớp nút bootstrap này, hãy tạo:

.btn .dropdown-toggle::after {
    display:none;
}

bạn đã thử tag = "a" trong lớp chưa? nó ẩn mũi tên mà không cần thêm css.

Thêm không có mũi tên để thả xuống chuyển đổi khai báo lớp

Điều này hoạt động trên bootsrap4 và ng-bootstrap.

.dropdown-toggle:after {
    display: none;
}