如何在React Bootstrap中为按钮添加pull-right属性？

Question

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

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

这样做确实可以，但是会在控制台中显示警告：

警告：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添加到样式列表中？我希望我的控制台中没有任何警告。

- X-Istence

---

@AndrewLi bsClass被添加到bsStyle的值之前。这样做不起作用。 - X-Istence

使用 className 怎么样？ - Andrew Li

确实可以！回答问题，我会标记为已回答 :-) - X-Istence

Answer 1

如果你查看React-Bootstrap组件，你会发现组件的属性bsStyle只接受以下值:

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

根据警告信息中提到的视觉外观。如果您想使用Bootstrap的pull-right类，只需使用className属性即可设置该组件的类：

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

- Andrew Li

---

如何在React 4中实现？ - Macilias

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>

- Aaron Brager

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>

- Romulo Rego