如何使用Bootstrap 5将下拉选择框与文本放在同一行并缩短下拉框

解决方案 #

你当前代码里的<p>标签、包裹下拉框的.container容器默认都是块级元素，会自动独占一行，所以才会出现文本和下拉框换行的问题。因为你已经在使用Bootstrap框架，直接用框架自带的布局类就能实现需求，不需要额外写复杂CSS：

修改后代码示例

<div class="row mt-4 align-items-center">
  <!-- 文本区域 -->
  <div class="col-auto">
    <p class="mb-0">1. 个人津贴：为自己选择1</p>
  </div>
  <!-- 下拉框区域 -->
  <div class="col-auto">
    <!-- 如需调整下拉框宽度，修改w-*类即可，w-auto是自适应内容宽度，也可以替换为w-25、w-50，或者自定义style="width: 你要的宽度" -->
    <select class="form-select w-auto" name="selT1">
      <option value="0" selected>0</option>
      <%for x=1 to 1
          if strT1=cstr(x) then%>
             <option value="<%=x%>" selected>&nbsp;<%=x%>&nbsp;</option>
          <%else%>                                            
             <option value="<%=x%>">&nbsp;<%=x%>&nbsp;</option>
          <%end if
      next%>
    </select> 
  </div>
</div>

核心修改说明

• 外层.row新增align-items-center类，让同行的文本和下拉框垂直居中对齐
• 把文本、下拉框分别放入.col-auto容器中，该类会让容器宽度自适应内容，自动排在同一行
• 移除了多余的.container外层容器，避免默认边距打乱布局
• 给.form-select新增w-auto类实现下拉框宽度适配内容，如需固定更小的宽度，可替换为style="width: 80px"等自定义数值
• 给<p>标签新增mb-0类，移除默认的下外边距，避免出现上下错位

如果不想用Bootstrap栅格系统，也可以直接加行内样式快速实现：

<div class="row mt-4">
  <p style="display: inline-block; vertical-align: middle; margin: 0;">1. 个人津贴：为自己选择1</p>
  <select class="form-select" style="display: inline-block; width: 80px; vertical-align: middle;" name="selT1">
    <!-- 原有option代码不变 -->
  </select>
</div>

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