如何在 React Bootstrap 中向按钮添加右拉？

Question

我有以下使用 React-Bootstrap 的 JSX:

<Button bsStyle="danger pull-right" bsSize="small" onClick={() => {alert('do stuff')}}>
    <Glyphicon glyph="trash" />
</Button>

这确实有效，但它在控制台中显示警告：

Warning: Failed prop type: Invalid prop bsStyle of value danger pull-right supplied to Button, expected one of ["success","warning","danger","info","default","primary","link"].

将 pull-right 添加到样式列表的最佳方法是什么？我不希望在我的控制台中有任何警告。

Answer 1

如果你看一下 React-Bootstrap Components，你会看到组件 Button 的属性 bsStyle 只接受以下值：

"success", "warning", "danger", "info", "default", "primary", "link"

基于警告消息中提到的视觉外观。如果您打算使用 Bootstrap 的 pull-right class，只需使用 className 属性即可设置该组件的 class：

<Button className="pull-right" bsStyle="danger" bsSize="small" onClick={() => {alert('do stuff')}}>
    <Glyphicon glyph="trash" />
</Button>

Answer 2

Bootstrap 4 次更新

现在 React Bootstrap 使用 Bootstrap 4，使用 float-right、float-sm-right 等：

<Button className="float-right" bsStyle="danger" bsSize="small" onClick={() => {alert('do stuff')}}>
    <Glyphicon glyph="trash" />
</Button>

Answer 3

Bootstrap 5 次更新

他们在采用 Bootstrap 5 后更改了 React Bootstrap，现在 float-right 是 float-end 和 float-sm-right 是 float-sm-end

<Button className="float-end" bsStyle="danger" bsSize="small" onClick={() => {alert('do stuff')}}>
   <Glyphicon glyph="trash" />
</Button>

如何在 React Bootstrap 中向按钮添加右拉？

How to add pull-right to a Button in React Bootstrap?

react-bootstrap

Bootstrap 4 次更新

Bootstrap 5 次更新