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

【问题标题】：How to add pull-right to a Button in React Bootstrap?如何在 React Bootstrap 中向按钮添加右拉？
【发布时间】：2017-03-05 18:58:44
【问题描述】：

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

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

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

警告：失败的道具类型：无效道具bsStyle 提供给danger pull-right 的值Button，应为["success","warning","danger","info","default","primary","link"] 之一。

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

【问题讨论】：

【解决方案1】：

如果您查看React-Bootstrap Components，您会看到组件Button 的prop 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>

【讨论】：

【解决方案2】：

引导程序 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>

【讨论】：

【解决方案3】：

他们在采用 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>

【讨论】：