本文介绍使用 bootstrap 4 实现“文本 + 输入框 + 后续文本”严格水平对齐于同一行的正确方法，重点解决默认表单控件因块级渲染导致的垂直错位问题。
本文介绍使用 bootstrap 4 实现“文本 + 输入框 + 后续文本”严格水平对齐于同一行的正确方法，重点解决默认表单控件因块级渲染导致的垂直错位问题。
在 Bootstrap 表单布局中，<input> 默认为块级元素（display: block），即使嵌入在 .col-* 列中，也会因 form-control 类内置的 height、padding 和 vertical-align 设置，导致其基线（baseline）与相邻纯文本不一致——表现为输入框“下沉”，与前面的 “I,” 或后面的句子明显错位。
使用 .row + 多列（如 col-sm-2 / col-sm-4）看似合理，但列宽固定、间隙不可控，且 form-control 的 width: 100% 会强制撑满列容器，反而加剧对齐困难；而 Bootstrap 的 .form-inline 仅适用于简单表单组合，对混合文本流支持不佳，且在响应式断点下行为不稳定。
✅ 正确解法是脱离栅格列约束，改用内联流式布局：将整个句子包裹在单个响应式列中，并通过工具类显式控制输入框的显示模式与尺寸：
<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="container-fluid">
<div class="row">
<div class="col-12 mt-3">
I,
<input type="text" asp-for="FullName" class="form-control d-inline w-auto input-lg">,
hereby acknowledge that I understand my responsibility as an:
</div>
</div>
</div>
关键样式说明：
-
d-inline：覆盖form-control默认的display: block，使<input>参与文本流； -
w-auto：解除width: 100%限制，让输入框宽度由内容和input-lg的padding/font-size自适应； -
input-lg仍生效，确保字体与高度符合大号输入框规范； - 整个句子保留在
col-12内，兼顾响应式布局需求（如需多列可嵌套，但输入框本身不拆分）。
⚠️ 注意事项：
- 避免给该
<input>设置margin或vertical-align（除非特殊微调），否则易破坏行内对齐； - 若需限制输入长度，用
maxlength属性而非size（后者在现代 Bootstrap 中已不推荐）； - 在小屏幕下，长句可能折行——如需强制单行，可加
text-nowrap到外层div，并配合横向滚动或overflow-x: auto； - ASP.NET Core 的
asp-for标签助手不受影响，仍可正常绑定模型属性。
此方案简洁、语义清晰、兼容性强，是处理“句子中嵌入输入框”这类场景的推荐实践。
