Twitter bootstrap插入符号大小

Question

我有这样一个插入符号:

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

使用CSS等可以使这个插入符更大吗

Answer 1

插入符号是一个css伪相元素,使用透明元素的边框构造.请参阅答案 - 如何构建Twitter Bootstrap上的插入符号？这提供了更好的解释和有用的链接.

要回答您的问题,您可以创建一个新的css类/覆盖,.caret以将边框增加到所需的大小.

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

增加px尺寸以获得所需的尺寸.请记住,如果您需要等边三角形,则三个值应该相同.

+1为解决方案。请记住，即使三个值相同，三角形也不是等边的;）欢呼 (2认同)
如果您正在编译自己的Less in Bootstrap 3,请在variables.less中查找`@ caret-width-base`(和`@ caret-width-large`).更改这些值以增加(或减少)插入符号大小. (2认同)

Answer 2

由于我无法评论接受的答案,我想建议调整该解决方案以使用border-width来防止插入符号的全局颜色样式,减少代码并包括dropup插入符的自动样式.

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

等等