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或其他方式使该插入符更大？

- trante

---

你需要改变在.caret类中使用的边框大小。 - BenM

Answer 1

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

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

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

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

- Kami

---

请注意，即使三个值相同，三角形也不是等边三角形;)祝好！ - mgPePe

你太棒了！刚刚花了20分钟才发现font-size不起作用，因为我一直以为它是某种图标类型。 :) - zazvorniki

如果您正在编译Bootstrap 3中的自己的Less，请在variables.less中查找@caret-width-base（和@caret-width-large）。更改这些值以增加（或减小）插入符号大小。 - Soulriser

@Soulriser 谢谢，那是正确的解决方案。另一个在某些组件（例如下拉按钮）中会出现问题。 - elsurudo

Answer 2

由于我无法对已接受的答案进行评论，所以我想建议调整该解决方案，使用border-width来防止插入符号的全局颜色样式，减少代码量并包含下拉插入符号的自动样式设置。

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

etc.

- Dennis Poort

Answer 3

对于那些寻找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的人。

- ben.kaminski

Answer 4

如果您想样式化只有'一个'(或重复一种)插入符号，那么您可以使用'style'属性来调整插入符号的大小。例如：

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

这不会影响其他插入符元素，只会影响包含此“border-width”属性的标签！

或者，如果您想在CSS文件中保留样式，可以标记ID属性：

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

然后在你的 .css 文件中添加样式：

#c1{
    border-width:8px;
}

- userAbhi