it-swarm.com.de

Twitter-Bootstrap-Caret-Größe

Ich habe ein Caret wie dieses:

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

Ist es möglich, dieses Caret mit CSS usw. zu vergrößern?.

23
trante

Das Caret ist ein css psuedo-Element, das aus den Rändern eines transparenten Elements besteht. Siehe die Antwort unter - Wie ist das Caret bei Twitter Bootstrap aufgebaut? das gibt eine viel bessere Erklärung und nützliche Links.

Um Ihre Frage zu beantworten, können Sie eine neue CSS-Klasse/Überschreibung .caret erstellen, um die Rahmen auf die erforderliche Größe zu vergrößern.

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

erhöhen Sie die px-Größe, um die erforderliche Größe zu erhalten. Denken Sie daran, dass die drei Werte gleich sein sollten, wenn Sie ein gleichseitiges Dreieck wünschen. 

48
Kami

Da ich die akzeptierte Antwort nicht kommentieren kann, möchte ich vorschlagen, diese Lösung zu ändern, um die Randbreite zu verwenden, um ein globales Farb-Styling des Caret-Codes zu vermeiden, weniger Code und das automatische Styling des Dropup-Caret.

.caret {
    border-width: 8px;
}

Falls Sie ein anders geformtes Caret benötigen, können Sie links, rechts, oben und unten verwenden:

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

oder

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

usw.

6
Dennis Poort

Wenn Sie nur "eine" Einfügemarke (oder eine sich wiederholende Art) formatieren möchten, können Sie das Stilattribut verwenden, um die Größe der Einfügemarke zu ändern. Für zB:

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

Dies hat keine Auswirkungen auf andere Caret-Elemente und nur das Tag, das dieses Attribut 'border-width' enthält, ist betroffen!

Wenn Sie den Stil in Ihrer CSS-Datei beibehalten möchten, können Sie alternativ das ID-Attribut benennen:

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

Und fügen Sie das Styling wie folgt in Ihrer .css hinzu:

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

Für diejenigen, die nach Bootstrap 4 Alpha 6 Support suchen, müssen Sie nur den Selektor in .dropdown-toggle::after ändern und überschreiben, was von "_nav.scss" kommt:

.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 */
}

Ich hoffe, das hilft denjenigen, die Bootstrap 4 Alpha 6 erkunden

0
ben.kaminski