React项目使用reactstrap时float-right类无法使按钮右对齐的问题

这种情况我之前也碰到过，不是Reactstrap的锅，主要是表格单元格（<td>）的布局特性限制了浮动的生效，下面给你几个靠谱的解决方案：

1. 用Bootstrap的绝对定位类替代浮动 #

表格单元格是table-cell布局，浮动元素在里面的表现本来就和块级元素不一样，改用绝对定位会更可靠：

<td className="col-md-4 position-relative">
  <Button className="position-absolute end-0" color="warning" size="sm">
    <FontAwesomeIcon icon={faTrashAlt} /> Delete
  </Button>
</td>

这里给父元素<td>加position-relative作为定位容器，按钮用position-absolute end-0（Bootstrap的内置类）直接靠右对齐，比写自定义样式更符合Bootstrap的规范。

2. 给父元素<td>加text-right类 #

你提到text-right对文本有效但按钮无效，其实是可以生效的——因为Reactstrap的Button本质是带btn类的行内块元素，text-right会让父元素内的行内/行内块内容自动右对齐。试试去掉按钮的float-right，给<td>加text-right：

<td className="col-md-4 text-right">
  <Button color="warning" size="sm">
    <FontAwesomeIcon icon={faTrashAlt} /> Delete
  </Button>
</td>

如果还是没效果，打开浏览器开发者工具检查一下：有没有自定义CSS覆盖了text-right的样式？或者按钮的display属性被改成了block？

3. 确认Bootstrap CSS已正确加载 #

别漏了最基础的一点：Reactstrap依赖Bootstrap的样式文件，必须在项目里正确引入。比如在index.js里加上：

import 'bootstrap/dist/css/bootstrap.min.css';

如果没加载Bootstrap CSS，float-right、text-right这些类根本没有对应的样式规则，自然不会生效。

为什么float-right在里无效？ #

简单来说，<td>是table-cell类型的元素，它的布局规则和普通块级元素不同：浮动元素在table-cell里不会像在div那样正常触发“包裹”行为，父元素加clearfix也解决不了这个问题——因为clearfix是针对块级元素的浮动清除方案，对table-cell无效。

内容的提问来源于stack exchange，提问作者tolga