如何实现长label标签与input输入框在同一行内对齐显示

问题根因 #

Bootstrap 5 已经废弃了旧版本的form-inline类，这个类现在无法生效，所以表单元素会默认按块级元素规则排列，长文本的label就会自动跳转到下一行。

修复方法 #

直接用Bootstrap 5自带的弹性布局工具类实现行内排列，同时自定义对齐规则即可：

• 外层容器加d-flex启用弹性布局，align-items-start实现所有元素顶部对齐（需要居中对齐可以替换为align-items-center），gap-2控制元素之间的间距
• 给长label加flex-shrink-1允许文本弹性收缩换行，短label和输入框加flex-shrink-0避免被挤压变形
• 额外给复选框加mt-1微调上边距，和label第一行文字对齐更协调，给所有label加mb-0去掉默认下边距避免错位

修复后的完整代码如下（含中文翻译版本）：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">

<div class="d-flex align-items-start gap-2">
    <input type="checkbox" class="mt-1" name="" /> 
    <label class="flex-shrink-1 mb-0">患者在达成当前治疗目标方面持续取得进展，因此本次将现有治疗计划再延长</label>
    <input type="number" class="flex-shrink-0" name="" />
    <label class="flex-shrink-0 mb-0">次就诊</label>
</div>

如果需要保留英文原文内容，直接替换label标签内的中文即可。

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