Jak usunąć strzałkę z listy rozwijanej w Bootstrap 4?

118

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>
Hongbo Miao
źródło

Odpowiedzi:

177

Po prostu usuń klasę „dropdown-toggle” z elementu. Lista rozwijana będzie nadal działać, jeśli masz atrybut przełączania danych w następujący sposób

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

nadpisywanie stylów klas .dropdown-toggle wpływa na wszystkie listy rozwijane i możesz chcieć zachować strzałkę w innych przyciskach, dlatego wydaje mi się to najprostsze rozwiązanie.

Edycja: zachowaj klasę rozwijaną, jeśli chcesz zachować styl obramowania

<button role="button" type="button" class="btn dropdown" data-toggle="dropdown"> 
    Dropdown Without Arrow
</button>
İlter Kağan Öcal
źródło
3
Z jakiegoś powodu inne rozwiązania nie działały dla mnie. Używam Bootstrap 4. To była jedyna rzecz, która działała.
anonimowy
9
To mi się nie udało. Prawa strona przycisku nie jest już zaokrąglona.
Jace Browning,
Prostsze niż pisanie niestandardowego CSS z !important:)
hughjdavey
2
Przetestowałem to i działa całkiem nieźle! Testowane w FF, Chrome, IE i Opera - nawet na urządzeniach mobilnych z Androidem z wbudowaną przeglądarką bez irytującej strzałki - wielkie dzięki! UWAGA: nie usuwaj całego atrybutu „dropdown-toggle”, po prostu usuń atrybut „-toggle”, aby nie pozbyć się stylu dla menu rozwijanego. Tak więc „przełącznik rozwijania” zamienia się w „rozwijanie” - mam nadzieję, że to pomoże.
Kerim Yagmurcu
126

Dzięki css możesz to zrobić:

.dropdown-toggle::after {
    display:none;
}
Clyff
źródło
11
Musiałem również dołączyć, !importantaby ten niestandardowy CSS zaczął obowiązywać.
Jace Browning
1
Będzie to miało wpływ na wszystkie menu używane na innych stronach, jeśli używasz tego samego arkusza CSS.
Pavan Nath
dodaj trochę więcej prefiksów, aby wyłączyć tylko strzałkę dla przycisku, np .: .btn.btn-outline-secondary.dropdown-toggle :: after {display: none! important; }
puppylpg
35

Nie polecam żadnej z istniejących odpowiedzi, ponieważ:

  • .dropdown-togglema więcej stylizacji niż tylko daszek. Usunięcie klasy z elementu powoduje problemy ze stylizacją .

  • Zastępowanie .dropdown-togglenie ma sensu. Tylko dlatego, że nie potrzebujesz opieki nad jakimś konkretnym elementem, nie oznacza, że ​​nie będziesz jej potrzebować później.

  • ::afternie obejmuje wariantów rozwijanych (niektóre zastosowania ::before).

Użyj niestandardowego .caret-offelementu w tym samym elemencie co .dropdown-toggleelement:

.caret-off::before {
    display: none;
}
.caret-off::after {
    display: none;
}
rybo111
źródło
3
Najlepsza odpowiedź, dodałbym tylko dodatkowe informacje dla innych osób, na przykład ta klasa powinna być dodana razem z dropdown-toggle.
eestein
12

usuń klasę „dropdown-toggle”

Abdullah Alkurdi
źródło
4
To bardziej jak komentarz
mrun
5

Jeśli chcesz zastąpić strzałkę inną ikoną (taką jak FontAwesome), wystarczy usunąć obramowanie z pseudoelementu .dropdown-toggle

.dropdown-toggle::after { border: none; }
Logan Franklin
źródło
4

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 :

$enable-caret: true !default;

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.scssz powyższego zestawu zmiennych na false w moich application.scss PRZED w bootstrap.scsspliku / plików.

bensmithbwd
źródło
2

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.

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

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:

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

a nasz html wygląda następująco:

<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
źródło
1

Boostrap generuje to przy użyciu ramki CSS:

.dropdown-toggle:after {
  border: none;
}
aceofspades
źródło
1

Jeśli chcesz dokładnie tylko w tej klasie przycisków bootstrap, wykonaj:

.btn .dropdown-toggle::after {
    display:none;
}
S. zbr
źródło
0

czy próbowałeś tag = "a" w klasie? ukrywa strzałkę bez dalszego CSS.

jerryurenaa
źródło
-1

Dodaj brak strzałki do listy rozwijanej, aby przełączyć deklarację klasy

Carl Leiner
źródło
-2

Działa to na bootsrap4 i ng-bootstrap.

.dropdown-toggle:after {
    display: none;
}
alvic
źródło
3
Kopiowanie zaakceptowanej odpowiedzi dwulatka, ale z literówką.
miken32