Bagaimana cara menghapus panah di dropdown di Bootstrap 4?

118

Saya menggunakan Bootstrap 4. Saya mencoba menghapus panah di dropdown.

The jawaban saya menemukan untuk Bootstrap 3 tidak bekerja lagi.

Jsfiddle ada di sini .

<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>
Hongbo Miao
sumber

Jawaban:

177

Cukup hapus kelas "dropdown-toggle" dari elemen. Dropdown akan tetap berfungsi jika Anda memiliki atribut data-toggle sebagai berikut

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

overriding gaya kelas .dropdown-toggle mempengaruhi semua dropdown dan Anda mungkin ingin membiarkan panah di tombol lain, itulah mengapa ini menurut saya solusi paling sederhana.

Edit: Pertahankan kelas tarik-turun jika Anda ingin mempertahankan gaya batas

<button role="button" type="button" class="btn dropdown" data-toggle="dropdown"> 
    Dropdown Without Arrow
</button>
İlter Kağan Öcal
sumber
3
Untuk beberapa alasan, solusi lain tidak berfungsi untuk saya. Saya menjalankan Bootstrap 4. Ini adalah satu-satunya hal yang berhasil.
anonymousacorn
9
Ini tidak cukup berhasil untuk saya. Sisi kanan tombol tidak lagi membulat.
Jace Browning
Lebih sederhana daripada menulis CSS khusus dengan !important:)
hughjdavey
2
Saya menguji ini dan itu bekerja dengan baik! Diuji di FF, Chrome, IE, dan Opera - bahkan di perangkat Android seluler dengan browser bawaan, tanpa panah yang mengganggu - terima kasih banyak, Pak! PEMBERITAHUAN: jangan hapus atribut "dropdown-toggle" lengkap, cukup hapus atribut "-toggle", sehingga gaya Anda untuk menu dropdown tidak hilang. Jadi "dropdown-toggle" berubah menjadi "dropdown" - semoga ini membantu.
Kerim Yagmurcu
126

Dengan css, Anda bisa melakukan itu:

.dropdown-toggle::after {
    display:none;
}
Clyff
sumber
11
Saya juga harus menyertakannya !importantagar CSS kustom ini diterapkan.
Jace Browning
1
Ini akan memengaruhi setiap dropdown yang digunakan di halaman lain jika Anda menggunakan CSS yang sama.
Pavan Nath
tambahkan beberapa awalan untuk hanya menonaktifkan panah untuk tombol, misalnya: .btn.btn-outline-secondary.dropdown-toggle :: after {display: none! important; }
puppylpg
35

Saya tidak merekomendasikan salah satu jawaban yang ada karena:

  • .dropdown-togglememiliki gaya lebih dari sekedar tanda sisipan. Menghapus kelas dari elemen menyebabkan masalah gaya .

  • Mengesampingkan .dropdown-toggletidak masuk akal. Hanya karena Anda tidak memerlukan tanda sisipan pada beberapa elemen tertentu, tidak berarti Anda tidak memerlukannya nanti.

  • ::aftertidak mencakup varian tarik-turun (beberapa digunakan ::before).

Gunakan kustom .caret-offdi elemen yang sama dengan elemen Anda .dropdown-toggle:

.caret-off::before {
    display: none;
}
.caret-off::after {
    display: none;
}
rybo111
sumber
3
Jawaban terbaik, saya hanya menambahkan beberapa info tambahan untuk orang lain, seperti kelas ini harus ditambahkan bersama dropdown-toggle.
eestein
12

hapus kelas "dropdown-toggle"

Abdullah Alkurdi
sumber
4
Itu lebih seperti komentar
mrun
5

Jika Anda tertarik untuk mengganti panah dengan Ikon lain (seperti, FontAwesome), Anda hanya perlu menghapus border pada elemen pseudo .dropdown-toggle

.dropdown-toggle::after { border: none; }
Logan Franklin
sumber
4

Saya menggunakan jawaban yang diterima cukup lama dalam proyek saya tetapi baru saja menemukan variabel yang digunakan oleh bootstrap :

$enable-caret: true !default;

Jika Anda menyetel ini ke false maka tanda sisipan akan dihapus tanpa harus melakukan kode khusus apa pun.

Proyek saya adalah Ruby / Rails jadi saya menggunakan bootstrap-rubygem . Saya mengubah variabel dengan mengimpor custom-variables.scssdengan di atas variabel set ke false di saya application.scss sebelum yang bootstrap.scssfile / file.

bensmithbwd
sumber
2

Jika Anda menghapus fit dengan kelas dropdown-toggle seperti di bawah ini, semua tombol dropdown di sistem Anda tidak lagi memiliki tanda sisipan.

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

Tapi mungkin bukan itu yang Anda inginkan, jadi untuk menghapus hanya tombol tertentu, kami akan memasukkan kelas yang disebut: remoecaret, dan kami akan menyesuaikan kelas: dropdown-toggle sebagai berikut:

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

dan html kita terlihat seperti ini:

<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>
krekto
sumber
1

Boostrap menghasilkan ini menggunakan batas CSS:

.dropdown-toggle:after {
  border: none;
}
As sekop
sumber
1

Jika Anda hanya ingin berada di kelas tombol bootstrap ini, buat:

.btn .dropdown-toggle::after {
    display:none;
}
S. zbr
sumber
0

Sudahkah Anda mencoba tag = "a" di dalam kelas? itu menyembunyikan panah tanpa css lebih lanjut.

jerryurenaa
sumber
-1

Tambahkan tanpa panah ke deklarasi kelas beralih drop-down

Carl Leiner
sumber
-2

Ini berfungsi pada bootsrap4 dan ng-bootstrap.

.dropdown-toggle:after {
    display: none;
}
alvic
sumber
3
Menyalin jawaban yang diterima anak berusia dua tahun, tetapi dengan salah ketik.
miken32