Bootstrap 5布局求助：多输入框行样式优化与动态表单结构

问题1：输入框换行时高度异常 #

Bootstrap默认布局下表单控件会被拉伸至整行高度，给输入框添加align-self-start类，强制它仅占据自身内容高度；同时将父容器的对齐方式从默认的align-items-stretch改为align-items-start，避免子元素被过度拉伸：

<input type="number" class="form-control align-self-start" placeholder="Value">

问题2："to"文本的对齐优化 #

将"to"放在内联容器中，添加align-self-center实现垂直居中，搭配mx-2设置左右间距，保证和输入框的水平间距合理：

<span class="align-self-center mx-2">to</span>

问题3：输入框显隐的HTML结构优化 #

1. 弃用ID选择器，改用类选择器提升复用性，比如用.range-input-group替代#show_b
2. 将"to"文本和第二个输入框包裹在统一容器中，集中控制显隐，结构更清晰：

<div class="d-flex align-items-center range-input-group visually-hidden">
  <span class="mx-2">to</span>
  <input type="number" class="form-control align-self-start" placeholder="Value">
</div>

3. 简化JS逻辑，用toggleClass替代手动添加/移除类：

$(document).ready(function() {
  $("#operator").on("change", function() {
    const $rangeGroup = $(this).closest(".row").find(".range-input-group");
    $rangeGroup.toggleClass("visually-hidden", $(this).val() === "e");
  });
});

4. 初始状态给范围输入组添加visually-hidden，默认隐藏，匹配"equals"选中时的显示逻辑。

整体结构参考 #

用d-flex flex-wrap align-items-start gap-2容器替代默认row，确保换行时元素高度正常、布局紧凑：

<div class="d-flex flex-wrap align-items-start gap-2">
  <select id="operator" class="form-select">
    <option value="e">equals</option>
    <option value="b">between</option>
  </select>
  <input type="number" class="form-control align-self-start" placeholder="Value">
  <div class="d-flex align-items-center range-input-group visually-hidden">
    <span class="mx-2">to</span>
    <input type="number" class="form-control align-self-start" placeholder="Value">
  </div>
</div>

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