Bootstrap 4'teki açılır menüdeki ok nasıl kaldırılır?

Bootstrap 4 kullanıyorum. Açılır menüdeki oku kaldırmaya çalıştım.

Cevaplar ben Bootstrap 3 bulundu artık çalışmaz.

Jsfiddle burada .

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

"Dropdown-toggle" sınıfını öğeden kaldırmanız yeterlidir. Aşağıdaki gibi data-toggle özniteliğine sahipseniz, açılır menü yine de çalışacaktır.

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

.dropdown-toggle sınıf stillerini geçersiz kılmak tüm açılır menüleri etkiler ve oku diğer düğmelerde tutmak isteyebilirsiniz, bu yüzden bu bana en basit çözüm gibi görünüyor.

Düzenle: Kenarlık stilini korumak istiyorsanız açılır sınıfı koruyun

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

Css ile şunu yapabilirsiniz:

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

Mevcut cevapların hiçbirini önermiyorum çünkü:

• .dropdown-toggleimleçten daha fazla stil içerir. Sınıfın öğeden kaldırılması stil sorunlarına neden olur .

• Geçersiz .dropdown-togglekılmak mantıklı değil. Belirli bir öğe için bir imlece ihtiyacınız olmaması, daha sonra ihtiyacınız olmayacağı anlamına gelmez.

• ::afteraçılır seçenekleri kapsamaz (bazı kullanımlar ::before).

Öğenizle .caret-offaynı öğede bir özel kullanın .dropdown-toggle:

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

"açılır-kapanır" sınıfını kaldırın

Oku başka bir Simgeyle (FontAwesome gibi) değiştirmekle ilgileniyorsanız, sadece .dropdown-toggle'ın sözde öğesindeki sınırı kaldırmanız gerekir.

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

Kabul edilen cevabı projemde uzunca bir süredir kullanıyordum ama şimdi önyükleme tarafından kullanılan bir değişkenle karşılaştım :

$enable-caret: true !default;

Bunu yanlış olarak ayarlarsanız, herhangi bir özel kod yapmak zorunda kalmadan imleç kaldırılacaktır.

Projem Ruby / Rails idi, bu yüzden bootstrap-rubygem kullanıyordum . Bir ithal ederek değişken değişti custom-variables.scssbenim false yukarıdaki değişken seti ile application.scss ÖNCEbootstrap.scss dosya / dosyalar.

Aşağıdaki gibi açılır-kapanır sınıfını kaldırırsanız, sisteminizdeki tüm açılır düğmeler artık düzeltme işaretine sahip olmayacaktır.

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

Ama belki de istediğin bu değil, bu yüzden sadece belirli bir düğmeyi kaldırmak için, remoecaret adlı bir sınıf ekleyeceğiz ve sınıfa aşağıdaki gibi uyacağız: açılır-açılır-kapanır:

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

ve html'miz şuna benzer:

<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, bunu CSS sınırını kullanarak oluşturur:

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

Tam olarak yalnızca bu önyükleme düğmesi sınıfında istiyorsanız, şunları yapın:

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

sınıf içinde tag = "a" denediniz mi? oku daha fazla css olmadan gizler.

Açılır geçiş sınıf bildirimine ok yok ekleyin

Bu, bootsrap4 ve ng-bootstrap üzerinde çalışır.

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