如何在Bootstrap 5中实现表单标签右对齐且按钮与输入框对齐

核心修改点 #

• 替换Bootstrap4的text-right类为Bootstrap5原生的text-end类，实现标签文本右对齐
• 采用Bootstrap栅格系统统一管控表单布局，替代硬写的宽度样式，适配性更强
• 给提交按钮外层添加对应栅格偏移，保证按钮和输入框左边缘严格对齐
• 移除冗余的自定义行内样式，使用Bootstrap原生能力实现需求

修改后完整代码 #

<!DOCTYPE html>
<html>
   <head>
      <title>HTML CSS JS</title>
   </head>
   <!-- Bootstrap CSS -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
   <body>
      <div class="container pt-5">
         <h1 class="pb-5 text-center">Title</h1>
         <form>
            <div class="row mb-3 justify-content-center">
               <label for="exampleInputEmail1" class="col-form-label col-sm-3 text-end">Portfolio holder</label>
               <div class="col-sm-4">
                  <input type="text" class="form-control" name="exampleInputEmail1" aria-describedby="emailHelp" required>
               </div>
            </div>
            <div class="row mb-3 justify-content-center">
               <label for="exampleInputPassword1" class="col-form-label col-sm-3 text-end">Country</label>
               <div class="col-sm-4">
                  <select class="form-select">
                     <option>Belgium</option>
                     <option>France</option>
                     <option>Italy</option>
                  </select>
               </div>
            </div>
            <div class="row mb-3 justify-content-center">
               <label for="clientFile" class="col-form-label col-sm-3 text-end">Client file number</label>
               <div class="col-sm-4">
                  <input type="text" class="form-control" name="clientFile" id="clientFile" aria-describedby="emailHelp" required>
               </div>
            </div>
            <div class="row mb-3 justify-content-center">
               <label for="accountType" class="col-form-label col-sm-3 text-end">Type of account</label>
               <div class="col-sm-4">
                  <select class="form-select" id="accountType">
                     <option >All agencies</option>
                     <option>ATH - Ath</option>
                     <option>BAU - Baudour</option>
                  </select>
               </div>
            </div>
            <div class="row justify-content-center">
               <div class="col-sm-4 offset-sm-3">
                  <button type="submit" class="btn btn-primary">Opening an account</button>
               </div>
            </div>
         </form>
      </div>
   </body>
</html>

效果说明 #

修改后所有表单标签会在自身栅格区域内右对齐，提交按钮会和上方所有输入框、下拉框的左边缘完全对齐，在不同屏幕尺寸下都能保持布局一致性，不需要额外自定义样式。

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