CSS Twitter 引导插入符大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17409820/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter bootstrap caret size
提问by trante
I have a caret like this:
我有一个这样的插入符：
<a class="dropdown-toggle" data-toggle="dropdown" href="#mylist"
style="display:inline-block;padding-left:0px;">
<b class="caret"></b>
</a>
Is it possible to make this caret bigger with CSS or etc.
是否可以使用 CSS 或其他方式使这个插入符号变大？
回答by Kami
The caret is a css psuedo element and constructed using the borders of a transparent element. See the answer at - How is the caret on Twitter Bootstrap constructed?which gives a much better explanation and useful links.
插入符号是一个 css 伪元素，使用透明元素的边框构建。请参阅答案 - Twitter Bootstrap 上的插入符号是如何构造的？这提供了更好的解释和有用的链接。
To answer your question, you can create a new css class/overwrite .caretto increases the borders to your required size.
要回答您的问题，您可以创建一个新的 css 类/覆盖.caret以将边框增加到您需要的大小。
.caret {
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #000000;
}
increase the pxsize to get the required size. Keep in mind that the three values should be the same if you want an equilateral triangle.
增加px大小以获得所需的大小。请记住，如果您想要一个等边三角形，这三个值应该相同。
回答by Dennis Poort
As I can't comment on the accepted answer, I would like to suggest tweaking that solution to use border-width to prevent global color styling of the caret, less code and includes automatic styling of the dropup caret.
由于我无法对已接受的答案发表评论，因此我建议调整该解决方案以使用边框宽度来防止插入符号的全局颜色样式，减少代码并包括下拉插入符号的自动样式。
.caret {
border-width: 8px;
}
In case you need a different shaped caret, you can use left, right, top, bottom:
如果您需要不同形状的插入符号，您可以使用左、右、上、下：
border-left-width: 8px;
border-right-width: 8px;
border-top-width: 10px;
border-bottom-width: 10px;
or
或者
border-width: 10px 8px 10px 8px;
etc.
等等。
回答by ben.kaminski
For those looking for Bootstrap 4 Alpha 6Support, you just have to change the selector to .dropdown-toggle::afterand override what's coming from "_nav.scss" like so:
对于那些正在寻找Bootstrap 4 Alpha 6Support 的人，您只需要将选择器更改为.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 */
}
Hope this helps those exploring Bootstrap 4 Alpha 6
希望这能帮助那些探索 Bootstrap 4 Alpha 6 的人
回答by userAbhi
If you want to style only 'one' caret ( or repetitive one kind) then you can use 'style' attribute to resize the caret. For eg:
如果您只想设置“一个”插入符（或重复一种）的样式，那么您可以使用“样式”属性来调整插入符的大小。例如：
<span class="caret" style="border-width:8px;"></span>
This will not affect other caret elements and only the tag containing this 'border-width' attribute will be affected!
这不会影响其他插入符号元素，只有包含此 'border-width' 属性的标签会受到影响！
Alternatively, if you want to keep the style in your css file you can label id attribute:
或者，如果您想在 css 文件中保留样式，您可以标记 id 属性：
<span class="caret" id="c1"></span>
And add the styling in your .css as follows:
并在您的 .css 中添加样式，如下所示：
#c1{
border-width:8px;
}
