React Bootstrap中“忘记密码”文本无法右对齐该如何解决？

问题原因 #

1. 若你使用的是Bootstrap 5版本，原有的float-right类已被废弃，替换为float-end，类名不匹配会导致样式不生效。
2. 你将"Forgot Password"容器嵌套在<Form.Label>标签内部，默认<Form.Label>未占满整行宽度，没有足够的空间实现右对齐效果。

最优解决方案 #

使用Flex布局实现更稳定，不会出现浮动带来的高度塌陷问题，无需额外自定义CSS：
修改密码区域的代码如下：

<Form.Group className = "form-group" id="password">
    {/* 给Label添加flex布局属性，实现两端对齐 */}
    <Form.Label className="d-flex justify-content-between align-items-center w-100">
        Password
        <div id="forgot-pass">
            <Link to="/forgot-password">Forgot Password?</Link>
        </div>
    </Form.Label>
    <Form.Control type="password" ref={passwordRef} required />
</Form.Group>

你可以删掉CSS中自定义的#forgot-pass { float: right; }规则，直接用Bootstrap内置工具类即可实现需求。

浮动方案（可选） #

如果坚持用浮动实现，先给<Form.Label>加w-100类让其占满整行，再根据你使用的Bootstrap版本选择对应的浮动类：

• Bootstrap 4：用float-right
• Bootstrap 5：用float-end

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