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>
css
twitter-bootstrap
twitter-bootstrap-4
Hongbo Miao
quelle
quelle
!important
:)Mit CSS können Sie genau das tun:
quelle
!important
, damit dieses benutzerdefinierte CSS wirksam wird.Ich empfehle keine der vorhandenen Antworten, weil:
.dropdown-toggle
hat mehr Styling als nur das Caret. Das Entfernen der Klasse aus dem Element führt zu Stilproblemen .Überschreiben
.dropdown-toggle
macht 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.::after
deckt keine Dropdown-Varianten ab (einige verwenden::before
).Verwenden Sie einen Benutzer
.caret-off
im selben Element wie Ihr.dropdown-toggle
Element:quelle
dropdown-toggle
.Entfernen Sie die Klasse "dropdown-toggle"
quelle
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
quelle
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 :
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.scss
wobei die obige Variable in meinemapplication.scss
BEFORE thebootstrap.scss
file / files auf false gesetzt war .quelle
Wenn Sie die Dropdown-Umschaltklasse wie folgt entfernen, haben alle Dropdown-Schaltflächen auf Ihrem System nicht mehr das Caret.
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:
und unser HTML sieht ungefähr so aus:
quelle
Boostrap generiert dies mithilfe des CSS-Rahmens:
quelle
Wenn Sie genau nur in dieser Bootstrap-Button-Klasse möchten, machen Sie:
quelle
Haben Sie versucht, tag = "a" innerhalb der Klasse? es verbirgt den Pfeil ohne weiteres CSS.
quelle
Fügen Sie der Dropdown-Deklaration der Umschaltklasse einen Pfeil ohne Pfeil hinzu
quelle
Dies funktioniert mit bootsrap4 und ng-bootstrap.
quelle