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，您会发现组件bsStyle的道具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 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

引导程序 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向Button添加pull-right

3 个答案:

Bootstrap 4更新

引导程序 5 更新