如何调整form-inline表单的input与label宽度并保持同行显示

• 给form-inline表单容器添加d-flex flex-nowrap align-items-center类，利用flex布局强制内部元素不换行，同时保持垂直居中对齐。
• 调整label的宽度行为：给label设置w-auto类（或自定义固定宽度，比如style="width: 120px;"），再加上me-2类控制与input的间距，避免label被压缩或占用过多空间。
• 让input自适应剩余空间：给input添加flex-grow-1类，替代固定的w-50，这样input会自动填充label之外的剩余空间，同时保持表单整体宽度适配父容器。
• 调整recline-query-editor容器：给该容器设置w-100类（或style="width: 100%;"），确保容器能占满父元素宽度，避免因容器过窄导致内部表单元素换行。

示例调整后的代码片段：

<div class="recline-query-editor w-100">
  <form class="form-inline d-flex flex-nowrap align-items-center">
    <label class="w-auto me-2" for="search-input">搜索字段：</label>
    <input type="text" class="form-control flex-grow-1" id="search-input" placeholder="输入搜索内容">
  </form>
</div>

• 若仍有换行问题，可通过浏览器开发者工具查看元素的计算样式，检查是否存在全局样式对input/label的宽度、margin或display属性的覆盖，再针对性调整。

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