如何刪除引導程序4中的下拉箭頭？

我正在使用Bootstrap 4.我試圖刪除下拉箭頭。我發現Bootstrap 3的answers不能再工作了。如何刪除引導程序4中的下拉箭頭？

jsfiddle是here。

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

來源

2016-07-25 Hongbo Miao

使用CSS，你可以只做到這一點：

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

來源

2016-07-25 20:11:31 Clyff

我還必須包含'！important'才能使此自定義CSS生效。 –

哦，我找到了辦法：

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

來源

2016-07-25 20:11:23

你可以做到這一點..

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

來源

2016-07-25 20:11:44 ZimSystem

也謝謝你和Clyff的工作。 –

如果您有興趣用另一個圖標替換箭頭（如FontAweso我）你只需要刪除.dropdown撥動

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

來源

2017-04-07 16:27:41

只需刪除「下拉菜單，切換」類從元素的僞元素的邊界。如果你有數據切換屬性的下拉列表仍然會工作如下

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

覆蓋.dropdown撥動類樣式影響所有的下拉列表中，您可能希望保留在其他按鈕的箭頭，這就是爲什麼這看起來我最簡單的解決方案

來源

2017-06-15 21:44:27 iko

出於某種原因，其他解決方案不適合我。我正在運行Bootstrap 4.這是唯一有效的工具。 –

這並不適合我。按鈕的右側不再是圓形的。 –

我用的是接受的答案在我的項目相當一段時間，但剛纔偶然發現一個variable used by bootstrap：

$enable-caret: true !default;

如果設置爲false，那麼光標將被移除，而無需做任何定製碼。

我的項目是Ruby/Rails，所以我使用的是bootstrap-rubygem。我通過導入custom-variables.scss來更改變量，其中上述變量在我的application.scss之前設置爲false，在之前bootstrap.scss文件/文件。

來源

2017-12-10 01:45:10 bensmithbwd

刪除「下拉開關」類

來源

2018-02-01 11:34:09

這更像是一條評論 – mrun

如何刪除引導程序4中的下拉箭頭？

回答

相關問題