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 psuedo元素，使用透明元素的边框构造。请参阅 - How is the caret on Twitter Bootstrap constructed?的答案，该答案提供了更好的解释和有用的链接。

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

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

增加px大小以获得所需的大小。请记住，如果您需要等边三角形，则三个值应该相同。

Answer 2

由于我无法对已接受的答案发表评论，我建议调整该解决方案以使用border-width来防止插入符号的全局颜色样式，减少代码并包括自动样式化dropup插入符号。< / p>

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

等

Answer 3

如果你只想设计一个＆＃39;一个＆＃39;插入符号（或重复的一种）然后你可以使用＆＃39; style＆＃39;属性来调整插入符号的大小。例如：

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

这不会影响其他插入符号元素，只会影响包含此＆＃39; border-width＆＃39;属性会受到影响！

或者，如果要在css文件中保留样式，可以标记id属性：

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

并在.css中添加样式，如下所示：

#c1{
    border-width:8px;
}

Answer 4

对于那些寻找 Bootstrap 4 Alpha 6 支持的用户，您只需将选择器更改为.dropdown-toggle::after并覆盖来自＆＃34; _nav.scss＆＃的内容34;像这样：

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

希望这有助于那些探索Bootstrap 4 Alpha 6的人

Twitter bootstrap插入符号大小

4 个答案: