it-swarm.com.de

Wie entferne ich den Pfeil in Dropdown in Bootstrap 4?

Ich verwende Bootstrap 4. Ich habe versucht, den Pfeil im Dropdown-Menü zu entfernen.

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

Das jsfiddle ist hier .

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

Mit css können Sie das einfach tun:

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

Entfernen Sie einfach die Klasse "dropdown-toggle" aus dem Element. Die Dropdown-Liste funktioniert weiterhin, wenn Sie das Attribut Data-Toggle wie folgt haben

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

das Überschreiben der Klassenstile .dropdown-toggle wirkt sich auf alle Dropdown-Listen aus, und Sie möchten möglicherweise den Pfeil in anderen Schaltflächen behalten. Aus diesem Grund scheint dies die einfachste Lösung zu sein. 

81
iko

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 .

  • Das Überschreiben von .dropdown-toggle macht keinen Sinn. Nur weil Sie für ein bestimmtes Element keine Einfügemarke benötigen, bedeutet dies nicht, dass Sie später keine mehr benötigen.

  • ::after behandelt nicht Dropdown-Varianten (einige verwenden ::before).

Verwenden Sie stattdessen eine benutzerdefinierte .caret-off-Klasse:

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

entfernen Sie die Klasse "Dropdown-Toggle"

7

Ich habe die akzeptierte Antwort für eine Weile in meinem Projekt verwendet, stolperte aber gerade über eine Variable, die von bootstrap verwendet wird:

$enable-caret: true !default;

Wenn Sie diesen Wert auf "false" setzen, wird das Caret-Zeichen entfernt, ohne dass ein benutzerdefinierter Code ausgeführt werden muss.

Mein Projekt war Ruby/Rails, also benutzte ich die bootstrap-rubygem . Ich habe die Variable geändert, indem ich einen custom-variables.scss importiert habe, wobei die obige Variable in meinem application.scssVOR der bootstrap.scss-Datei/-Dateien auf false gesetzt war.

3
bensmithbwd

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

Wenn Sie die unten stehende Dropdown-Toggle-Klasse entfernen, werden alle Dropdown-Schaltflächen in Ihrem System nicht mehr über die Einfügemarke verfügen.

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

Aber vielleicht möchten Sie nicht nur die bestimmte Schaltfläche entfernen, sondern fügen eine Klasse mit dem Namen remoecaret ein und passen die Klasse an: dropdown-toggle wie folgt:

.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>
0
krekto

Bootstrap generiert dies mit dem CSS-Rahmen:

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