如何在不修改Column Layout的前提下让textfield填充可用空间

下面是几种实用的实现方式，不用依赖column 12布局，同时保证窗口调整时按钮不会被压缩：

• 通用Flexbox方案
  给父容器设置弹性布局，让文本框占据剩余空间，按钮保持自身内容宽度：

  <div style="display: flex; gap: 8px;">
    <input type="text" style="flex: 1; padding: 8px;" placeholder="输入内容">
    <button style="padding: 8px 16px;">提交</button>
  </div>
  

  核心是给文本框加flex: 1，按钮默认会自适应内容，不会被压缩。

• Bootstrap框架适配方案
  利用Bootstrap的内置flex类快速实现：

  <div class="d-flex gap-2">
    <input type="text" class="form-control flex-grow-1" placeholder="输入内容">
    <button class="btn btn-primary flex-shrink-0">提交</button>
  </div>
  

  flex-grow-1让文本框占满剩余空间，flex-shrink-0强制按钮不被压缩，完美适配Bootstrap环境。

• CSS Grid方案
  用网格布局也能轻松实现，设置列宽为1fr auto：

  <div style="display: grid; grid-template-columns: 1fr auto; gap: 8px;">
    <input type="text" style="padding: 8px;" placeholder="输入内容">
    <button style="padding: 8px 16px;">提交</button>
  </div>
  

  1fr表示文本框占满剩余空间，auto让按钮根据内容自动调整宽度。

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