使用Bootstrap设置input百分比宽度时未按父容器调整怎么办

问题原因 #

你遇到的宽度计算异常是因为包裹input的<small>标签是默认行内元素，宽度由内部内容撑开，没有明确的宽度基准。Bootstrap的w-*百分比宽度类是相对于直接父元素的宽度计算的，父元素无固定宽度时，就会 fallback 到基于input自身的默认内容宽度计算，导致和预期不符。

解决方案（全部使用Bootstrap原生类，无需自定义CSS） #

修改代码如下：

<div class="container my-5">
  <h1 class="fw-normal">Fibonacci Calculator</h1>
  <div id="calculatorContainer" class="d-flex align-items-center gap-2">
    <span>The Fibonacci Of</span>
    <small class="flex-grow-1">
      <input
        type="number"
        class="mx-2 form-control form-control-sm d-inline-block w-25"
        placeholder="#"
      />
      <button type="button" class="btn btn-primary">ls</button>
    </small>
  </div>
</div>

改动说明 #

• 给<small>添加flex-grow-1类：让它占满外层弹性容器的剩余可用宽度，获得明确的宽度基准，input的w-25就会基于small的宽度正常计算，不会再出现父容器空白的问题
• 给input添加form-control、form-control-sm类：使用Bootstrap原生表单样式规范输入框外观，同时适配宽度类的计算逻辑
• 给外层容器添加gap-2类：统一控制元素间距，你可以根据需要调整为gap-1/gap-3等数值修改间距大小

如果觉得w-25的宽度不符合预期，也可以替换为Bootstrap原生的其他宽度类：w-50/w-75/w-auto，或者搭配栅格系统实现更精细的宽度控制。

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