如何将react-router-dom的Link标签内文本对齐到Form.Label右侧？

我来帮你搞定这个对齐问题！你遇到的问题根源在于 Form.Label默认是行内（inline）元素，它的宽度由内部内容决定，所以你嵌套的div.w-100其实没法真正撑满整个父容器的宽度，导致text-right样式看起来没生效。

下面给你几个可行的解决方案：

方案1：把Form.Label改为块级元素 #

给Form.Label添加Bootstrap的d-block类，让它变成块级元素，这样内部的div.w-100就能占满整个宽度，text-right就会正常工作：

<Form.Label style={{ fontWeight: 'bold' }} className="d-block">
  <div className="w-100">
    Password 
    <Link to="/forgot-password" className="text-right">Forgot Password?</Link>
  </div>
</Form.Label>

方案2：用Bootstrap Flex布局（更简洁） #

直接利用Bootstrap的flex布局类，给Form.Label添加d-flex和justify-content-between，这样左右两个元素会自动分布在容器的两端，不需要额外嵌套div：

<Form.Label style={{ fontWeight: 'bold' }} className="d-flex justify-content-between w-100">
  Password
  <Link to="/forgot-password">Forgot Password?</Link>
</Form.Label>

方案3：自定义CSS样式 #

如果不想依赖Bootstrap类，也可以直接给Form.Label设置自定义样式，强制它成为flex容器并分配元素位置：

<Form.Label style={{ 
  fontWeight: 'bold', 
  display: 'flex', 
  justifyContent: 'space-between', 
  width: '100%' 
}}>
  Password
  <Link to="/forgot-password">Forgot Password?</Link>
</Form.Label>

简单总结一下：核心就是让Form.Label拥有块级元素的宽度（占满父容器），或者通过flex布局直接控制内部元素的对齐方式，这样你的"Forgot Password?"链接就能乖乖靠右啦！

内容的提问来源于stack exchange，提问作者pl-jay