Bootstrap 5.2.3下拉菜单与输入框堆叠而非并排的布局问题

一、实现下拉菜单与输入框并排显示的方案 #

你当前代码的问题在于：父容器用了col-1（宽度过窄），且内部的<select>和<input>额外添加了col-1、col-2类——col类在非row容器中默认是块级元素，必然导致堆叠。

要实现并排带间距的效果，用Bootstrap的flex布局类调整最直接：

1. 给父容器加d-flex（启用flex布局）和align-items-center（让元素垂直居中）；
2. 用gap-2（可替换为gap-3等，控制元素间距）；
3. 移除内部元素的col-*类，换成w-auto（让元素自适应宽度）或固定宽度类（比如w-25）。

修改后的代码示例：

<div class="d-flex align-items-center gap-2 pe-3">
   <select name="display_format" id="display_format" class="form-select form-select-sm w-auto">
      <option value="display">Display</option>
      <option value="output">Output</option>
   </select>
   <input id="select_year" type="number" class="form-control form-control-sm w-auto">
</div>

二、pe-3的含义解析 #

pe-3是Bootstrap的间距实用类，拆解规则如下：

• p代表padding（内边距）；
• e代表end（左到右布局中对应右侧，右到左布局中对应左侧）；
• 3是间距等级，对应Bootstrap默认变量$spacer * 1.5（默认$spacer为1rem，所以pe-3就是1.5rem的右侧内边距）。

Bootstrap间距类通用命名逻辑：{属性}{方向}-{大小}，其中属性含p(padding)、m(margin)；方向含t(上)、b(下)、s(左)、e(右)、x(左右)、y(上下)；大小从0到5，另有auto选项。

内容的提问来源于stack exchange，提问作者Jiří Emmer