如何在React，bootstrap中使插入符更大？

Question

使用React Bootstrap可以使Caret更大吗？

<DropdownButton
    pullRight
    id="drpSetting"
    title={menuTitle}
>
    <MenuItem>Inställningar</MenuItem>
    <MenuItem>Betalningsinställningar</MenuItem>
    <MenuItem onClick={::this.logout}>Logga ut</MenuItem>
</DropdownButton>

Answer 1

将此代码添加到现有的CSS文件

.caret {
  border-width: 10px;
}

这样做可确保所有包含span的呈现下拉列表的大小增加caret。

Answer 2

我想添加上面给出的答案，你应该添加 border-bottom-width: 0;。

.caret {
  border-width: 10px;
  border-bottom-width: 0; //<---- Here
}

Updated grusl83's JSFiddle

您也可以为您的下拉列表提供自定义className

<DropdownButton
    pullRight
    id="drpSetting"
    title={menuTitle}
    className="custom-dropdown-btn">
>

然后用它来设计你的插入符号：

.custom-dropdown-btn .caret {
  border-width: 10px;
  border-bottom-width: 0;
}  

Answer 3

CSS方法：

.caret {
  border-width:10px;
}

的jsfiddle： https://jsfiddle.net/DTcHh/38821/