如何缩小Bootstrap表单宽度时避免firstName、lastName输入列换行

问题原因 #

你遇到的折行问题是两个原因叠加导致的：

• 表单内部嵌套了多个.container，该类自带响应式最大宽度限制和左右内边距，和form上添加的px-5内边距叠加后，姓名行的可用水平宽度被压缩到阈值以下
• 姓名行的两个输入框父容器仅使用了无断点的.col类，空间不足时会自动堆叠换行

解决方案 #

方案1：修改现有结构（推荐，兼容性最好） #

修改两处代码即可：

1. 将form内所有表单项外层的.container替换为.w-100，避免多层容器的宽度和内边距叠加：
   把所有<div class="container px-4 pt-3">修改为<div class="w-100 px-4 pt-3">
2. 强制姓名行两列等宽不堆叠，将两个输入框的父容器类从.col修改为.col-6：

<!-- 修改前 -->
<div class="col mx-0 px-0 border-end">
<div class="col mx-0 px-0 border-start">

<!-- 修改后 -->
<div class="col-6 mx-0 px-0 border-end">
<div class="col-6 mx-0 px-0 border-start">

方案2：添加CSS兜底（无需改动HTML结构） #

如果不想调整现有HTML代码，直接在样式表中添加如下规则即可：

/* 强制姓名行flex容器不换行，两列自动平分宽度 */
#cform .row:has(#firstName, #lastName) {
  flex-wrap: nowrap;
}

优化建议 #

你当前的留言输入框用的是<input>标签，仅支持单行输入，建议替换为<textarea>标签，更适合多行留言场景，用户体验更好。

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