Wie entferne ich den Pfeil in der Dropdown-Liste in Bootstrap 4?

Ich verwende Bootstrap 4. Ich habe versucht, den Pfeil in der Dropdown-Liste zu entfernen.

Die Antworten, die ich für Bootstrap 3 gefunden habe, funktionieren nicht mehr.

Die jsfiddle ist da .

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

Entfernen Sie einfach die Klasse "dropdown-toggle" aus dem Element. Das Dropdown-Menü funktioniert weiterhin, wenn Sie das Datenumschaltattribut wie folgt haben

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

Das Überschreiben von .dropdown-toggle-Klassenstilen wirkt sich auf alle Dropdowns aus. Möglicherweise möchten Sie den Pfeil in anderen Schaltflächen behalten. Deshalb scheint mir dies die einfachste Lösung zu sein.

Bearbeiten: Behalten Sie die Dropdown-Klasse bei, wenn Sie das Rahmen-Styling beibehalten möchten

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

Mit CSS können Sie genau das tun:

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

Ich empfehle keine der vorhandenen Antworten, weil:

• .dropdown-togglehat mehr Styling als nur das Caret. Das Entfernen der Klasse aus dem Element führt zu Stilproblemen .

• Überschreiben .dropdown-togglemacht keinen Sinn. Nur weil Sie für ein bestimmtes Element kein Caret benötigen, heißt das nicht, dass Sie später kein Caret benötigen.

• ::afterdeckt keine Dropdown-Varianten ab (einige verwenden ::before).

Verwenden Sie einen Benutzer .caret-offim selben Element wie Ihr .dropdown-toggleElement:

.caret-off::before {
    display: none;
}
.caret-off::after {
    display: none;
}

Entfernen Sie die Klasse "dropdown-toggle"

Wenn Sie den Pfeil durch ein anderes Symbol (z. B. FontAwesome) ersetzen möchten, müssen Sie nur den Rand des Pseudoelements von .dropdown-toggle entfernen

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

Ich habe die akzeptierte Antwort eine ganze Weile in meinem Projekt verwendet, bin aber gerade auf eine Variable gestoßen , die von Bootstrap verwendet wird :

$enable-caret: true !default;

Wenn Sie dies auf false setzen, wird das Caret entfernt, ohne dass ein benutzerdefinierter Code erforderlich ist.

Mein Projekt war Ruby / Rails, also habe ich das Bootstrap-Rubygem verwendet . Ich habe die Variable geändert, indem ich a importiert habe, custom-variables.scsswobei die obige Variable in meinem application.scss BEFORE the bootstrap.scssfile / files auf false gesetzt war .

Wenn Sie die Dropdown-Umschaltklasse wie folgt entfernen, haben alle Dropdown-Schaltflächen auf Ihrem System nicht mehr das Caret.

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

Aber vielleicht ist es nicht das, was Sie wollen. Um nur die spezifische Schaltfläche zu entfernen, fügen wir eine Klasse mit dem Namen: remoecaret ein und passen die Klasse: dropdown-toggle wie folgt an:

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

und unser HTML sieht ungefähr so ​​aus:

<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 generiert dies mithilfe des CSS-Rahmens:

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

Wenn Sie genau nur in dieser Bootstrap-Button-Klasse möchten, machen Sie:

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

Haben Sie versucht, tag = "a" innerhalb der Klasse? es verbirgt den Pfeil ohne weiteres CSS.

Fügen Sie der Dropdown-Deklaration der Umschaltklasse einen Pfeil ohne Pfeil hinzu

Dies funktioniert mit bootsrap4 und ng-bootstrap.

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