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>
css
twitter-bootstrap
twitter-bootstrap-4
Hongbo Miao
sumber
sumber
!important
:)Dengan css, Anda bisa melakukan itu:
sumber
!important
agar CSS kustom ini diterapkan.Saya tidak merekomendasikan salah satu jawaban yang ada karena:
.dropdown-toggle
memiliki gaya lebih dari sekedar tanda sisipan. Menghapus kelas dari elemen menyebabkan masalah gaya .Mengesampingkan
.dropdown-toggle
tidak masuk akal. Hanya karena Anda tidak memerlukan tanda sisipan pada beberapa elemen tertentu, tidak berarti Anda tidak memerlukannya nanti.::after
tidak mencakup varian tarik-turun (beberapa digunakan::before
).Gunakan kustom
.caret-off
di elemen yang sama dengan elemen Anda.dropdown-toggle
:sumber
dropdown-toggle
.hapus kelas "dropdown-toggle"
sumber
Jika Anda tertarik untuk mengganti panah dengan Ikon lain (seperti, FontAwesome), Anda hanya perlu menghapus border pada elemen pseudo .dropdown-toggle
sumber
Saya menggunakan jawaban yang diterima cukup lama dalam proyek saya tetapi baru saja menemukan variabel yang digunakan oleh bootstrap :
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.scss
dengan di atas variabel set ke false di sayaapplication.scss
sebelum yangbootstrap.scss
file / file.sumber
Jika Anda menghapus fit dengan kelas dropdown-toggle seperti di bawah ini, semua tombol dropdown di sistem Anda tidak lagi memiliki tanda sisipan.
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:
dan html kita terlihat seperti ini:
sumber
Boostrap menghasilkan ini menggunakan batas CSS:
sumber
Jika Anda hanya ingin berada di kelas tombol bootstrap ini, buat:
sumber
Sudahkah Anda mencoba tag = "a" di dalam kelas? itu menyembunyikan panah tanpa css lebih lanjut.
sumber
Tambahkan tanpa panah ke deklarasi kelas beralih drop-down
sumber
Ini berfungsi pada bootsrap4 dan ng-bootstrap.
sumber