css - Twitter ブートストラップキャレットのサイズ

Question

私はこのようなキャレットを持っています:

<a class="dropdown-toggle" data-toggle="dropdown" href="#mylist"
       style="display:inline-block;padding-left:0px;">
 <b class="caret"></b>
</a>

このキャレットをCSSなどで大きくすることは可能ですか?

score 50 · Accepted Answer

キャレットは CSS 疑似要素であり、透過要素の境界線を使用して構築されます。回答を参照してください - Twitter Bootstrap のキャレットはどのように構築されていますか? これにより、より良い説明と便利なリンクが得られます。

あなたの質問に答えるために、新しい css クラス/上書き.caretを作成して、境界線を必要なサイズに増やすことができます。

.caret {
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #000000;
}

サイズを大きくpxして、必要なサイズを取得します。正三角形が必要な場合は、3 つの値が同じである必要があることに注意してください。

score 6 · Accepted Answer

受け入れられた回答についてコメントすることはできないため、border-width を使用してキャレットのグローバルカラースタイリングを防ぎ、コードを減らし、ドロップアップキャレットの自動スタイリングを含めるようにソリューションを微調整することをお勧めします。

.caret {
    border-width: 8px;
}

別の形のキャレットが必要な場合は、左、右、上、下を使用できます。

border-left-width: 8px;
border-right-width: 8px;
border-top-width: 10px;
border-bottom-width: 10px;

また

border-width: 10px 8px 10px 8px;

等

css - Twitter ブートストラップ キャレットのサイズ