Twitter引导插入符号大小
Twitter引导插入符号大小
提问于 2013-07-02 01:00:47
我有一个这样的插入符号：
<a class="dropdown-toggle" data-toggle="dropdown" href="#mylist"
style="display:inline-block;padding-left:0px;">
<b class="caret"></b>
</a>有没有可能使这个插入符号更大的CSS或等。
回答 4
Stack Overflow用户
回答已采纳
发布于 2013-07-02 01:14:13
插入符号是一个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大小以获得所需的大小。请记住，如果您想要等边三角形，则这三个值应该相同。
Stack Overflow用户
发布于 2015-04-01 22:48:46
由于我不能评论公认的答案，我建议调整这个解决方案，使用边框宽度来防止插入符号的全局颜色样式，更少的代码，并包括下拉插入符号的自动样式。
.caret {
border-width: 8px;
}如果你需要一个不同形状的插入符号，你可以使用left，right，top，bottom：
border-left-width: 8px;
border-right-width: 8px;
border-top-width: 10px;
border-bottom-width: 10px;或
border-width: 10px 8px 10px 8px;等。
Stack Overflow用户
发布于 2017-03-15 05:32:13
对于那些寻找Bootstrap4Alpha6支持的人，您只需将选择器更改为.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的人有所帮助
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/17409820
复制相关文章
相似问题
腾讯云开发者
