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

116

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>
Hongbo Miao
quelle

Antworten:

175

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>
İlter Kağan Öcal
quelle
3
Aus irgendeinem Grund funktionierten die anderen Lösungen bei mir nicht. Ich verwende Bootstrap 4. Dies war das einzige, was funktioniert hat.
anonymousacorn
9
Das hat bei mir nicht ganz funktioniert. Die rechte Seite der Schaltfläche ist nicht mehr abgerundet.
Jace Browning
Einfacher als das Schreiben von benutzerdefiniertem CSS mit !important:)
hughjdavey
2
Ich habe das getestet und es funktioniert ziemlich gut! Getestet in FF, Chrome, IE und Opera - auch auf mobilen Android-Geräten mit integriertem Browser kein störender Pfeil - vielen Dank, Sir! HINWEIS: Entfernen Sie nicht das vollständige Attribut "dropdown-toggle", sondern nur das Attribut "-toggle", damit Ihr Styling für das Dropdown-Menü nicht verloren geht. "Dropdown-Toggle" wird also zu "Dropdown" - ich hoffe, das hilft.
Kerim Yagmurcu
124

Mit CSS können Sie genau das tun:

.dropdown-toggle::after {
    display:none;
}
Clyff
quelle
11
Ich musste auch einschließen !important, damit dieses benutzerdefinierte CSS wirksam wird.
Jace Browning
1
Dies wirkt sich auf jedes Dropdown-Menü aus, das auf anderen Seiten verwendet wird, wenn Sie dasselbe CSS verwenden.
Pavan Nath
Fügen Sie ein weiteres Präfix hinzu, um nur den Pfeil für die Schaltfläche zu deaktivieren, z. }
Puppylpg
34

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;
}
rybo111
quelle
3
Beste Antwort, ich würde nur ein paar zusätzliche Informationen für andere Leute hinzufügen, so wie diese Klasse zusammen mit hinzugefügt werden sollte dropdown-toggle.
Eestein
12

Entfernen Sie die Klasse "dropdown-toggle"

Abdullah Alkurdi
quelle
4
Das ist eher wie ein Kommentar
mrun
5

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; }
Logan Franklin
quelle
4

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 .

bensmithbwd
quelle
2

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>
krekto
quelle
1

Boostrap generiert dies mithilfe des CSS-Rahmens:

.dropdown-toggle:after {
  border: none;
}
Pik-Ass
quelle
1

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

.btn .dropdown-toggle::after {
    display:none;
}
S. zbr
quelle
0

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

jerryurenaa
quelle
-1

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

Carl Leiner
quelle
-2

Dies funktioniert mit bootsrap4 und ng-bootstrap.

.dropdown-toggle:after {
    display: none;
}
alvic
quelle
3
Das Kopieren der zweijährigen akzeptierten Antwort, aber mit einem Tippfehler.
miken32