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的引導尖大小

回答

相關問題