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

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>

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>

Dzięki css możesz to zrobić:

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

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;
}

usuń klasę „dropdown-toggle”

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

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

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.

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>

Boostrap generuje to przy użyciu ramki CSS:

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

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

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

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

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

Działa to na bootsrap4 i ng-bootstrap.

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