Bootstrap5中如何实现label与input同排且保持1.5cm间距？

失效原因 #

你使用的是Bootstrap 5版本，该版本已移除旧版中提供的form-inline类，因此你找到的旧版本适配方案无法生效。

实现方案 #

直接使用Bootstrap 5内置的弹性布局类即可快速实现需求，同时自定义边距满足1.5厘米的间距要求：

• 给form-group容器添加d-flex align-items-center类，让内部label和输入框组件自动排在同一行且垂直居中
• 给label标签添加margin-right: 1.5cm的样式，即可设置两者之间的间距为1.5厘米

修改后完整代码 #

<!DOCTYPE html>
<html>
   <head>
      <title>HTML CSS JS</title>
      <!-- CSS only -->
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
   </head>
   <body>
      <h1 id="welcome">HTML CSS JS</h1>
      <div class="col-12 col-md-6 col-lg-3">
         <!-- 新增d-flex和align-items-center类 -->
         <div class="form-group d-flex align-items-center">
            <!-- 新增1.5厘米右边距 -->
            <label for="beginDate" style="margin-right: 1.5cm">Start date</label>
            <div class="input-group">
               <input name="beginDate" id="beginDate" type="text" class="form-control"
               style="background-color: white;"
               (ngModelChange)="changedBeginDateInput($event)" [(ngModel)]="beginDate">
               <input id="picker1" class="form-control" placeholder="dd/mm/yyyy" name="dp1"
               ngbDatepicker #dp1="ngbDatepicker" [(ngModel)]="begin.validityDate"
               (ngModelChange)="changedBeginDate($event)"
               style="position: absolute; left: 0; visibility: hidden">
               <div class="input-group-append" (click)="dp1.toggle()">
                  <span class="input-group-text" id="basic-addon2">
                  <i class="icon-regular i-Calendar-4"></i>
                  </span>
               </div>
            </div>
         </div>
      </div>
     
     <div class="col-12 col-md-6 col-lg-3">
        <!-- 新增d-flex和align-items-center类，移除无效的form-inline类 -->
        <div class="form-group d-flex align-items-center">
            <!-- 新增1.5厘米右边距，修正for属性和对应input id匹配 -->
            <label for="endDate" style="margin-right: 1.5cm">End date</label>
            <div class="input-group">
               <input name="endDate" id="endDate" type="text" class="form-control"
               style="background-color: white;"
               (ngModelChange)="changedEndDateInput($event)" [(ngModel)]="endDate">
               <input id="picker2" class="form-control" placeholder="dd/mm/yyyy" name="dp2"
               ngbDatepicker #dp2="ngbDatepicker" [(ngModel)]="end.validityDate"
               (ngModelChange)="changedEndDate($event)"
               style="position: absolute; left: 0; visibility: hidden">
               <div class="input-group-append" (click)="dp2.toggle()">
                  <span class="input-group-text" id="basic-addon2">
                  <i class="icon-regular i-Calendar-4"></i>
                  </span>
               </div>
            </div>
         </div>
      </div>
   </body>
</html>

补充说明 #

上述代码同时修正了原有代码中两处可优化的点：

• 两个日期输入框的id重复，已区分修改为beginDate和endDate，label的for属性也对应调整，保证点击label可以聚焦到对应输入框
• 第二个日期选择器的实例名也从dp1修改为dp2，避免两个日期组件触发冲突

效果示意图：

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