25

我有这样的插入符号：

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

是否可以使用 CSS 等使这个插入符号更大？

4

4 回答 4

50

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

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

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

增加px尺寸以获得所需的尺寸。请记住，如果您想要一个等边三角形，这三个值应该相同。

于 2013-07-01T17:14:13.297 回答
6

由于我无法评论已接受的答案，我想建议调整该解决方案以使用边框宽度来防止插入符号的全局颜色样式、更少的代码并包括下拉插入符号的自动样式。

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

等等

于 2015-04-01T14:48:46.480 回答
1

对于那些寻找Bootstrap 4 Alpha 6支持的人，您只需将选择器更改为.dropdown-toggle::after并覆盖来自“_nav.scss”的内容，如下所示：

.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 的人有所帮助

于 2017-03-14T21:32:12.803 回答
0

如果您只想设置“一个”插入符号（或重复的一种）的样式，那么您可以使用“样式”属性来调整插入符号的大小。例如：

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

这不会影响其他插入符号元素，只有包含此 'border-width' 属性的标签会受到影响！

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

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

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

#c1{
    border-width:8px;
}
于 2015-09-14T05:00:27.893 回答