web-dev-qa-db-fra.com

Taille de caret de bootstrap de Twitter

J'ai un caret comme ça:

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

Est-il possible d'agrandir ce curseur avec CSS ou etc.

csscss3twitter-bootstrap
23
trante

Le caret est un élément css psuedo et construit à l'aide des bordures d'un élément transparent. Voir la réponse à - Comment le curseur est-il construit sur Twitter Bootstrap? qui donne une explication bien meilleure et des liens utiles.

Pour répondre à votre question, vous pouvez créer une nouvelle classe CSS/écraser .caret afin d’augmenter les bordures à la taille requise.

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

augmentez la taille px pour obtenir la taille requise. N'oubliez pas que les trois valeurs doivent être identiques si vous souhaitez un triangle équilatéral. 

48
Kami

Comme je ne peux pas commenter la réponse acceptée, je voudrais suggérer d’améliorer cette solution pour utiliser largeur de bordure afin d’empêcher le style de couleur global du curseur, moins de code et l’inclusion automatique du style du curseur.

.caret {
    border-width: 8px;
}

Au cas où vous auriez besoin d’une forme différente du curseur, vous pouvez utiliser gauche, droite, haut, bas:

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

ou

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

etc.

6
Dennis Poort

Si vous souhaitez styler un seul curseur (ou un type répétitif), vous pouvez utiliser l'attribut "style" pour redimensionner le curseur. Par exemple:

<span class="caret" style="border-width:8px;"></span>

Cela n'affectera pas les autres éléments du curseur et seule la balise contenant cet attribut 'border-width' sera affectée!

Alternativement, si vous souhaitez conserver le style dans votre fichier css, vous pouvez étiqueter l'attribut id:

<span class="caret" id="c1"></span>

Et ajoutez le style dans votre fichier .css comme suit:

#c1{
    border-width:8px;
}
0
userAbhi

Pour ceux qui recherchent Bootstrap 4 Alpha 6 Support, il vous suffit de définir le sélecteur sur .dropdown-toggle::after et de remplacer le contenu de "_nav.scss" comme suit:

.dropdown-toggle::after {
    display: inline-block; /* Default */
    width: 0; /* Default */
    height: 0; /* Default */
    margin-left: .3em; /* Default */
    vertical-align: middle; /* Default */
    content: ""; /* Default */
    border-top: .6em solid; /* caret size */
    border-right: .6em solid transparent; /* caret size */
    border-left: .6em solid transparent; /* caret size */
}

J'espère que cela aidera ceux qui explorent Bootstrap 4 Alpha 6

0
ben.kaminski