NgbDropdown: entfernen Sie die dropdown-Pfeil

Ich bin mit der NgbDropdown Bestandteil in meinem Winkel 2 Anwendung. Es ist in Ordnung, jedoch möchte ich entfernen den Pfeil, der angezeigt wird, auf der rechten Seite der Schaltfläche.

<div class="d-inline-block" ngbDropdown #myDrop="ngbDropdown">
  <button class="btn btn-outline-primary" id="dropdownMenu1" ngbDropdownToggle>Toggle dropdown</button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <button class="dropdown-item">Action - 1</button>
    <button class="dropdown-item">Another Action</button>
    <button class="dropdown-item">Something else is here</button>
  </div>
</div>

Dropdown-Bild

InformationsquelleAutor JP4 | 2017-03-19
  1. 31

    Lösung

    Fügen Sie einfach die folgenden CSS-style überschreiben des Standard-Stil der .dropdown-toggle::after pseudo-element:

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

    Warum?

    Standardmäßig bootstrap-fügt den Pfeil, um die dropdown-Komponente, über die ::after pseudo-element.

    Dies zu tun, entfernen Sie es.

    Hier ist ein LIVE-DEMO demonstrieren.

    , Wie Sie arbeiten es aus?

    Chrome dev-tools können Sie überprüfen das element:

    NgbDropdown: entfernen Sie die dropdown-Pfeil

    Wir können oben sehen, dass es ist ein Stil, der für eine pseudo-element ::after auf der .dropdown-toggle Klasse. Lasst uns gehen und ändern Sie die Eigenschaften des Elements! HIERFÜR verändern wir die display Eigenschaft none:

    NgbDropdown: entfernen Sie die dropdown-Pfeil

    Dem pseudo-element ist nicht mehr da!!:

    NgbDropdown: entfernen Sie die dropdown-Pfeil

    • Ich muss hinzufügen, diese Klasse zu, die noch sichtbar auf der Unterseite der Elemente auf dem Bildschirm angezeigt: .dropup .dropdown-toggle::after { display:none; }
    InformationsquelleAutor cnorthfield
  2. 4

    fügen Sie den folgenden Stil, um die Standardeinstellung zu überschreiben einer

    .dropdown-toggle::after{
    content:initial
 }

    LIVE-DEMO

    InformationsquelleAutor Aravind
  3. 1

    In der Bootstrap-4, können Sie den dropdown-Pfeil die sogenannte caret-Zeichen durch die Deklaration einer $enable-caret SASS-variable und der Einstellung false:

    $enable-caret: false;

    Diese überschreibt den Standardwert von true Satz in der Bootstrap ist _variable.scss:

    //Options
//
//Quickly modify global styling by enabling or disabling optional features.

$enable-caret:                                true !default;

    Aber im Hinterkopf behalten, dass es vollständig entfernt die entsprechenden CSS-styles. Also, es ist der beste Ansatz, wenn Sie nicht brauchen, carets weltweit und möchten, verringern Sie Ihre CSS-Nutzlast.

    InformationsquelleAutor Alexander Abakumov
Schreibe einen Kommentar