Twitter的引导尖大小

我有一个这样的插入符：Twitter的引导尖大小

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

是否有可能使这个插入符更大的CSS或等

来源

2013-07-01 trante

您需要更换'.caret'类使用的边框的大小。 – BenM

插入符号是CSS伪元素，并使用构建的边界的透明元素。请参阅 - 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尺寸以获得所需的尺寸。请记住，如果你想要一个等边三角形，这三个值应该是一样的。

来源

2013-07-01 17:14:13 Kami

+1。请记住，即使三个值是相同的，三角形也不是等边的;）干杯 – mgPePe

你太棒了！只花了20分钟试图找出字体大小不工作，因为我认为它是一种图标。 :) – zazvorniki

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

由于我无法对接受的答案发表评论，因此我想建议调整该解决方案以使用边框宽度来防止脱字符的全局颜色样式，减少代码并包括dropup插入符号的自动样式。

.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-01 14:48:46

如果您想要只设计'one'插入符号（或重复一种），然后可以使用'style'属性来调整插入符号大小。例如：

<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-14 05:00:27 userAbhi

对于那些寻找引导4阿尔法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 */ 
}

希望这会帮助那些探索引导4阿尔法6

来源

2017-03-14 21:32:12

Twitter的引导尖大小

回答

相关问题