如何用CSS/Flexbox实现Bootstrap行内两列的特定空间分配

要实现输入框对齐且左列下方空白高度匹配右列提示文本，只需调整左列结构并优化Flex布局设置，具体修改如下：

核心思路 #

• 让左右两列容器高度完全一致，确保内部Flex布局同步分配空间
• 左列添加与右列提示文本容器样式完全一致的占位元素，以此匹配空白高度
• 利用Flex的justify-content-between让输入框始终处于同一水平位置

修改后的代码 #

<div class="row">
  <div class="col-xl-6 d-flex flex-column h-100 justify-content-between">
    <div>
      <label for="deliverypoint_code_left">TEXT</label>
    </div>
    <div>
      <div>
        <input type="text" id="deliverypoint_code_left" name="deliverypoint_code_left" class="w-100 p-3">
      </div>
      <!-- 添加与右列提示容器样式一致的占位元素 -->
      <div class="mt-2"></div>
    </div>                    
  </div>   
  <div class="col-xl-6 d-flex flex-column h-100 justify-content-between">
    <div>
      <label for="deliverypoint_code_right">TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT</label>
    </div>
    <div>
      <div>
        <input type="text" id="deliverypoint_code_right" name="deliverypoint_code_right" class="w-100 p-3">
      </div>            
      <div class="mt-2">
        <span class="error-message">TEXT TEXT</span>
      </div>
    </div>                    
  </div>                                                 
</div>

关键细节说明 #

• 给两个col-xl-6添加h-100类，强制列高度与父容器（row）一致，确保内部Flex布局的空间分配同步
• 左列新增的<div class="mt-2"></div>和右列的提示文本容器样式完全相同，保证两者高度一致，实现空白匹配
• 保留justify-content-between让label区域和输入框区域分别占据列的上下空间，从而让左右输入框自动对齐

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