Twitter Bootstrap daszka rozmiar

Question

Mam daszka tak:

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

Czy to możliwe, aby ten daszek większy z CSS lub itp

Answer 1

Daszek jest elementem css psuedo i skonstruowana na podstawie granic przezroczystego elementu. Zobacz odpowiedź na - How is the caret on Twitter Bootstrap constructed?, która daje dużo lepsze wyjaśnienie i przydatne linki.

Aby odpowiedzieć na pytanie, możesz utworzyć nową klasę css/zastąpić .caret, aby zwiększyć granice do wymaganego rozmiaru.

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

zwiększyć rozmiar px, aby uzyskać wymagany rozmiar. Pamiętaj, że te trzy wartości powinny być takie same, jeśli chcesz trójkąta równobocznego.

Answer 2

Ponieważ nie mogę wypowiedzieć się na temat zaakceptowanej odpowiedzi, chciałbym zaproponować ulepszenie tego rozwiązania, aby użyć szerokości krawędzi, aby zapobiec globalnej stylizacji kolorystycznej kija, mniej kodu i obejmuje automatyczną stylizację kurtyny upuszczania.

.caret { 
    border-width: 8px; 
} 

W przypadku trzeba inny kształcie daszka, można użyć w lewo, prawo, góra, dół:

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

lub

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

itp

Answer 3

Jeśli chcesz stylizować tylko jeden "jeden" (lub powtarzalny jeden rodzaj), a następnie możesz użyć atrybutu "styl", aby zmienić rozmiar kurtyny. Na przykład:

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

Nie wpłynie to na inne elementy karetki, a wpłynie to tylko na znacznik zawierający ten atrybut "szerokości obramowania"!

Ewentualnie, jeśli chcesz zachować styl w pliku css można oznaczyć atrybut id:

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

i dodać stylizacji w swoim .css następująco:

#c1{ 
    border-width:8px; 
} 

Answer 4

Dla tych, szukając Bootstrap 4 Alpha 6 Wsparcie, po prostu musisz zmienić selektor na .dropdown-toggle::after i zastąpić to, co pochodzi od "_nav.scss", tak jak:

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

Nadzieja to pomaga ci odkrywania Bootstrap 4a 6