Używam Bootstrap 4. Próbowałem usunąć strzałkę z listy rozwijanej.
W odpowiedzi znalazłem na Bootstrap 3 nie działają dłużej.
Jsfiddle jest tutaj .
<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
źródło
źródło
!important
:)Dzięki css możesz to zrobić:
źródło
!important
aby ten niestandardowy CSS zaczął obowiązywać.Nie polecam żadnej z istniejących odpowiedzi, ponieważ:
.dropdown-toggle
ma więcej stylizacji niż tylko daszek. Usunięcie klasy z elementu powoduje problemy ze stylizacją .Zastępowanie
.dropdown-toggle
nie ma sensu. Tylko dlatego, że nie potrzebujesz opieki nad jakimś konkretnym elementem, nie oznacza, że nie będziesz jej potrzebować później.::after
nie obejmuje wariantów rozwijanych (niektóre zastosowania::before
).Użyj niestandardowego
.caret-off
elementu w tym samym elemencie co.dropdown-toggle
element:źródło
dropdown-toggle
.usuń klasę „dropdown-toggle”
źródło
Jeśli chcesz zastąpić strzałkę inną ikoną (taką jak FontAwesome), wystarczy usunąć obramowanie z pseudoelementu .dropdown-toggle
źródło
Używałem zaakceptowanej odpowiedzi przez dłuższy czas w moim projekcie, ale właśnie natknąłem się na zmienną używaną przez bootstrap :
Jeśli ustawisz to na false, daszek zostanie usunięty bez konieczności wykonywania żadnego niestandardowego kodu.
Moim projektem był Ruby / Rails, więc użyłem bootstrap-rubygem . Zmieniłem zmienną importując
custom-variables.scss
z powyższego zestawu zmiennych na false w moichapplication.scss
PRZED wbootstrap.scss
pliku / plików.źródło
Jeśli usuniesz opcję dopasuj klasę przełączania listy rozwijanej, jak poniżej, wszystkie przyciski rozwijane w systemie nie będą już miały karetki.
Ale może nie tego chcesz, więc aby usunąć tylko określony przycisk, wstawimy klasę o nazwie: remoecaret i dopasujemy klasę: dropdown-toggle w następujący sposób:
a nasz html wygląda następująco:
źródło
Boostrap generuje to przy użyciu ramki CSS:
źródło
Jeśli chcesz dokładnie tylko w tej klasie przycisków bootstrap, wykonaj:
źródło
czy próbowałeś tag = "a" w klasie? ukrywa strzałkę bez dalszego CSS.
źródło
Dodaj brak strzałki do listy rozwijanej, aby przełączyć deklarację klasy
źródło
Działa to na bootsrap4 i ng-bootstrap.
źródło