React-Bootstrap向Button添加pull-right

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组件,你会发现bsStyle组件的prop Button只接受以下值:

"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>

Answer 2

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>

Answer 3

引导程序 4 更新

现在，阵营引导使用引导4，用途float-right，float-sm-right等等：

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