blocks|key|773091|text|插入符号是一个css+psuedo元素，使用透明元素的边框构造。请访问-+How+is+the+caret+on+Twitter+Bootstrap+constructed?查看答案，它提供了更好的解释和有用的链接。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|773092|要回答你的问题，你可以创建一个新的css类/覆盖.caret来增加边框到你需要的大小。|style|CODE|773093|.caret+{
++++border-left:+8px+solid+transparent;
++++border-right:+8px+solid+transparent;
++++border-top:+8px+solid+#000000;
}|code-block|syntax|javascript|773094|增加px大小以获得所需的大小。请记住，如果您想要等边三角形，则这三个值应该相同。|773095|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/14404923/how-is-the-caret-on-twitter-bootstrap-constructed^0|11|1E|0|0|O|6|0|0|2|2|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]]|C|$]]|$1|D|3|E|5|6|7|10|8|@$A|11|B|12|F|G]]|9|@]|C|$]]|$1|H|3|I|5|J|7|13|8|@]|9|@]|C|$K|L]]|$1|M|3|N|5|6|7|14|8|@$A|15|B|16|F|G]]|9|@]|C|$]]|$1|O|3|-4|5|6|7|17|8|@]|9|@]|C|$]]]|P|$Q|$5|R|S|T|C|$U|V]]]]

The caret is a css psuedo element and constructed using the borders of a transparent element. See the answer at - <a href="https://stackoverflow.com/questions/14404923/how-is-the-caret-on-twitter-bootstrap-constructed">How is the caret on Twitter Bootstrap constructed?</a> which gives a much better explanation and useful links.

To answer your question, you can create a new css class/overwrite <code>.caret</code> to increases the borders to your required size.

<pre><code>.caret {
 border-left: 8px solid transparent;
 border-right: 8px solid transparent;
 border-top: 8px solid #000000;
}
</code></pre>

increase the <code>px</code> size to get the required size. Keep in mind that the three values should be the same if you want an equilateral triangle.

blocks|key|775929|text|由于我不能评论公认的答案，我建议调整这个解决方案，使用边框宽度来防止插入符号的全局颜色样式，更少的代码，并包括下拉插入符号的自动样式。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|775930|.caret+{
++++border-width:+8px;
}|code-block|syntax|javascript|775931|如果你需要一个不同形状的插入符号，你可以使用left，right，top，bottom：|775932|border-left-width:+8px;
border-right-width:+8px;
border-top-width:+10px;
border-bottom-width:+10px;|775933|或|775934|border-width:+10px+8px+10px+8px;|775935|等。|775936|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|W|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|Y|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

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.

<pre><code>.caret {
 border-width: 8px;
}
</code></pre>

In case you need a different shaped caret, you can use left, right, top, bottom:

<pre><code>border-left-width: 8px;
border-right-width: 8px;
border-top-width: 10px;
border-bottom-width: 10px;
</code></pre>

or

<pre><code>border-width: 10px 8px 10px 8px;
</code></pre>

etc.

blocks|key|2183182|text|如果您只想设置“一个”插入符号(或重复的一种插入符号)的样式，那么您可以使用“style”属性来调整插入符号的大小。例如：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2183183|<span+class="caret"+style="border-width:8px;">|code-block|syntax|javascript|2183184|这将不会影响其他插入符号元素，并且只会影响包含此“边框宽度”属性的标签！|2183185|或者，如果您希望将样式保留在css文件中，则可以将id属性标记为：|2183186|<span+class="caret"+id="c1">|2183187|然后在.css中添加样式，如下所示：|2183188|#c1{
++++border-width:8px;
}|2183189|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|V|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|W|8|@]|9|@]|A|$E|F]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|D|7|Y|8|@]|9|@]|A|$E|F]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

If you want to style only 'one' caret ( or repetitive one kind) then you can use 'style' attribute to resize the caret. For eg:

<pre><code>&lt;span class="caret" style="border-width:8px;"&gt;&lt;/span&gt;
</code></pre>

This will not affect other caret elements and only the tag containing this 'border-width' attribute will be affected!

Alternatively, if you want to keep the style in your css file you can label id attribute:

<pre><code>&lt;span class="caret" id="c1"&gt;&lt;/span&gt;
</code></pre>

And add the styling in your .css as follows:

<pre><code>#c1{
 border-width:8px;
}
</code></pre>

blocks|key|2183224|text|对于那些寻找Bootstrap4Alpha6支持的人，您只需将选择器更改为.dropdown-toggle::after，并覆盖来自"_nav.scss“的内容，如下所示：|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|CODE|entityRanges|data|2183225|.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+*/
}|code-block|syntax|javascript|2183226|希望这对那些探索Bootstrap+4+Alpha+6的人有所帮助|2183227|entityMap^0|6|G|11|N|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]|$9|S|A|T|B|D]]|E|@]|F|$]]|$1|G|3|H|5|I|7|U|8|@]|E|@]|F|$J|K]]|$1|L|3|M|5|6|7|V|8|@]|E|@]|F|$]]|$1|N|3|-4|5|6|7|W|8|@]|E|@]|F|$]]]|O|$]]

For those looking for Bootstrap 4 Alpha 6 Support, you just have to change the selector to <code>.dropdown-toggle::after</code> and override what's coming from "_nav.scss" like so:

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

Hope this helps those exploring Bootstrap 4 Alpha 6

I have a caret like this:

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

Is it possible to make this caret bigger with CSS or etc.

Twitter bootstrap caret size

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我有一个这样的插入符号：<a class="dropdown-toggle" data-toggle="dropdown" href="#mylist" style="display:inline-block;padding-left:0px;"> </a>有没有可...

问Twitter引导插入符号大小
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Twitter引导插入符号大小EN