如何在Bootstrap 5中实现含文本与输入框的列右对齐？

你在从Bootstrap 3升级到Bootstrap 5时，遇到了无法将包含文本和输入框的列对齐到右侧的问题。以下是可行的解决方法：

问题原因 #

• Bootstrap 5 已弃用 text-right，替换为 text-end；
• 你原代码中同时使用 d-flex 和 float-end 无效，因为flex容器内的float属性不会生效；
• Bootstrap 5 的 form-control 默认是块级元素（display:block），需要调整为行内块级才能和文本在同一行显示。

解决方法1：使用文本对齐类（最贴近原Bootstrap 3写法） #

直接用 text-end 替代原有的 text-right，同时给输入框添加 d-inline-block 类（Bootstrap 5 内置类）使其保持行内块级：

<div class="row">
  <div class="col-12 text-end">
    Text:&nbsp;
    <input class="form-control d-inline-block" maxlength="12" style="width:130px;" type="text" value="0.00">
  </div>
</div>

解决方法2：使用Flex布局 #

利用Bootstrap 5的Flex工具类，给容器添加 d-flex justify-content-end 实现整体右对齐，此时输入框无需额外设置行内块级：

<div class="row">
  <div class="col-12 d-flex justify-content-end">
    Text:&nbsp;
    <input class="form-control" maxlength="12" style="width:130px;" type="text" value="0.00">
  </div>
</div>

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