web-dev-qa-db-ja.com

Bootstrap 4のドロップダウンの矢印を削除する方法は？

Bootstrap 4.を使用しています。ドロップダウンの矢印を削除しようとしました。

answers Bootstrap 3の場合は機能しません。

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>
csstwitter-bootstraptwitter-bootstrap-4
75
Hongbo Miao

Cssを使用すると、次のことができます。

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

要素から「dropdown-toggle」クラスを削除するだけです。次のようにdata-toggle属性がある場合、ドロップダウンは引き続き機能します

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

.dropdown-toggleクラスのスタイルをオーバーライドすると、すべてのドロップダウンが影響を受けるため、他のボタンに矢印を保持することをお勧めします。そのため、これが最も単純なソリューションに見えます。

編集：境界線のスタイルを保持する場合は、ドロップダウンクラスを保持します

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

次の理由により、既存の回答を推奨しません。

  • .dropdown-toggleには、キャレット以外のスタイリングがあります。要素からクラスを削除すると、 スタイリングの問題 が発生します。

  • .dropdown-toggleをオーバーライドしても意味がありません。特定の要素にキャレットが必要ないからといって、後で必要になるわけではありません。

  • ::afterは ドロップダウンバリアント をカバーしません（一部は::beforeを使用します）。

代わりにカスタム.caret-offクラスを使用します。

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

「dropdown-toggle」クラスを削除します

8
Abdullah Alkurdi

矢印を別のアイコン（FontAwesomeなど）に置き換えることに興味がある場合は、.dropdown-toggleの擬似要素の境界線を削除するだけで済みます。

.dropdown-toggle::after { border: none; }
4
Logan Franklin

私は私のプロジェクトで受け入れられた答えをかなり長い間使用していましたが、たった今 bootstrapで使用される変数 に出くわしました：

$enable-caret: true !default;

これをfalseに設定すると、カスタムコードを実行することなくキャレットが削除されます。

私のプロジェクトはRuby/Railsだったので、 bootstrap-rubygem を使用していました。 custom-variables.scssで上記の変数をfalseに設定してapplication.scssをインポートすることで変数を変更しましたBEFORE the bootstrap.scss file/files。

3
bensmithbwd

以下のようにドロップダウントグルクラスに合わせて削除すると、システム上のすべてのドロップダウンボタンにキャレットがなくなります。

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

しかし、それはあなたが望むものではないかもしれないので、特定のボタンだけを削除するために、remoecaretというクラスを挿入し、次のようにクラスをドロップダウントグルします：

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

htmlは次のようになります。

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

Bootstrapは、CSSボーダーを使用してこれを生成します。

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