Bootstrap行内文本与input框对齐及同行布局问题求助

问题根源 #

• 初始代码里form-control类默认是块级元素，会独占一行，导致输入框落在“I,”下方
• 拆分固定宽度列后，Bootstrap的col类自带左右内边距，直接造成元素间距过大

解决方案 #

利用Bootstrap的行内块类、自适应列宽和垂直居中类即可实现需求，以下是两种可行方案：

方案1：拆分自适应列控制间距

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

<div class="form-group row align-items-center">
  <div class="col-sm-auto">
    I,
  </div>
  <div class="col-sm-auto pr-2">
    <input type="text" asp-for="FullName" class="form-control input-lg d-inline-block w-auto" />
  </div>
  <div class="col-sm">
    hereby acknowledge that I understand my responsibility as an:
  </div>
</div>

• align-items-center：让行内所有元素垂直居中对齐
• col-sm-auto：列宽度自适应内容，避免固定宽度带来的冗余间距
• d-inline-block：把输入框改为行内块元素，和文本保持在同一行
• w-auto：让输入框宽度随内容自动调整，替代size属性
• pr-2：给输入框所在列加少量右内边距，优化与后续文本的间距

方案2：同列紧凑布局

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

<div class="form-group row align-items-center">
  <div class="col-sm-auto">
    I, <input type="text" asp-for="FullName" class="form-control input-lg d-inline-block w-auto ml-2" />
  </div>
  <div class="col-sm ml-2">
    hereby acknowledge that I understand my responsibility as an:
  </div>
</div>

• 将“I,”与输入框放在同一自适应列中，结构更紧凑
• ml-2：通过左内边距手动调整元素间的间距，灵活控制紧凑程度

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