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


118

ブートストラップ4を使用しています。ドロップダウンの矢印を削除しようとしました。

答えブートストラップ3はもはや動作しないために私が見つけました。

jsfiddleはこちらです。

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

回答:


176

要素から「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>

3
何らかの理由で、他の解決策がうまくいかなかった。私はBootstrap 4を実行しています。これが機能したのはこれだけでした。
anonymousacorn

9
これは私にはうまくいきませんでした。ボタンの右側が丸みを帯びなくなりました。
ジェイスブラウニング

!important:)を使用してカスタムCSSを作成するよりも簡単
hughjdavey

2
私はこれをテストしました、そしてそれはかなりうまくいきます!FF、Chrome、IE、Operaでテスト済み-組み込みのブラウザーを備えたモバイルandroidデバイスでも、迷惑な矢印はありません-ありがとうございます。注意:「dropdown-toggle」属性全体を削除するのではなく、「-toggle」属性を削除するだけで、ドロップダウンメニューのスタイリングが削除されません。したがって、「dropdown-toggle」は「dropdown」に変わります-これが役立つことを願っています。
Kerim Yagmurcu

126

CSSを使用すると、次のようにすることができます。

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

11
また!important、このカスタムCSSを有効にするために含める必要がありました。
ジェイスブラウニング

1
これは、同じCSSを使用している場合、他のページで使用されるすべてのドロップダウンに影響します。
Pavan Nath

ボタンの矢印を無効にするだけのプレフィックスを追加します。例:.btn.btn-outline-secondary.dropdown-toggle :: after {display:none!important; }
puppylpg

35

次の理由により、既存の回答のいずれもお勧めしません。

  • .dropdown-toggleキャレットだけではなく、より多くのスタイルがあります。要素からクラスを削除すると、スタイルの問題が発生します

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

  • ::afterカバーしていないバリアントドロップダウン(一部の使用を::before)。

.caret-offエレメントと同じエレメントでカスタムを使用します.dropdown-toggle

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

3
最良の回答dropdown-toggleです。このクラスをとともに追加する必要があるように、他の人のためにいくつかの追加情報を追加します。
eestein、


5

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

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

4

私はプロジェクトでかなり長い間、受け入れられた答えを使用していましたが、ブートストラップで使用される変数に遭遇しました:

$enable-caret: true !default;

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

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


2

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

.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

このブートストラップボタンクラスのみを使用する場合は、次のようにします。

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

0

クラス内でtag = "a"を試しましたか?それはそれ以上のCSSなしで矢印を隠します。



-2

これは、bootsrap4とng-bootstrapで動作します。

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

3
2年前の回答をコピーしましたが、タイプミスがあります。
miken32
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.