如何让Bootstrap内联表单适配列的完整宽度

嘿，我来帮你搞定这个Bootstrap内联表单宽度的问题！

首先得说清楚问题的根源：Bootstrap 4的.form-inline默认是display: inline-flex，它的宽度只会包裹内部的表单元素，不会自动撑满父容器（也就是你的col-lg-10）的全部可用宽度。下面给你两种实用的解决方案：

方案一：修改现有.form-inline布局 #

只需要给表单加上.w-100类让它占满父容器宽度，再给需要填充空间的控件加上.flex-grow-1，让它们自动分配剩余空间：

<div class="container">
  <div class="row">
    <div class="col-lg-2 title">
      <h2>Make a Gift:</h2>
      <p>Give Generously</p>
    </div>
    <div class="col-lg-10">
      <form class="form-inline w-100">
        <label class="sr-only">Donation Type</label>
        <select class="form-control my-1 mr-sm-2 flex-grow-1">
          <option selected>One Time Donation</option>
          <option value="1">Recurring Donation</option>
        </select>
        <label class="sr-only">Donation Amount</label>
        <input class="form-control my-1 mr-sm-2 flex-grow-1" type="number" placeholder="Donation Amount">
        <label class="sr-only">Choose Fund</label>
        <select class="form-control my-1 mr-sm-2 flex-grow-1">
          <option selected>Syria Emergency</option>
          <option value="1">Winterisation</option>
        </select>
        <button type="submit" class="btn btn-primary my-1">Donate Now</button>
      </form>
    </div>
  </div>
</div>

• .w-100：强制表单宽度为100%，占满col-lg-10的全部空间
• .flex-grow-1：让每个表单控件在可用空间里自动扩展，平分剩余宽度
• 保留my-1和mr-sm-2来控制垂直和水平间距，小屏幕上控件会自动堆叠，保持响应式体验

方案二：改用栅格系统构建表单（更推荐） #

如果需要更精细的响应式控制，建议放弃.form-inline，直接用Bootstrap的栅格系统（row+col）来搭建表单，布局灵活性更高：

<div class="container">
  <div class="row">
    <div class="col-lg-2 title">
      <h2>Make a Gift:</h2>
      <p>Give Generously</p>
    </div>
    <div class="col-lg-10">
      <form class="row g-3 align-items-center">
        <div class="col-auto flex-grow-1">
          <label class="sr-only">Donation Type</label>
          <select class="form-control w-100">
            <option selected>One Time Donation</option>
            <option value="1">Recurring Donation</option>
          </select>
        </div>
        <div class="col-auto flex-grow-1">
          <label class="sr-only">Donation Amount</label>
          <input class="form-control w-100" type="number" placeholder="Donation Amount">
        </div>
        <div class="col-auto flex-grow-1">
          <label class="sr-only">Choose Fund</label>
          <select class="form-control w-100">
            <option selected>Syria Emergency</option>
            <option value="1">Winterisation</option>
          </select>
        </div>
        <div class="col-auto">
          <button type="submit" class="btn btn-primary">Donate Now</button>
        </div>
      </form>
    </div>
  </div>
</div>

• .row+.col-auto：把表单拆分成多个列，自动适配内容宽度
• .flex-grow-1：让每个控件列平等分配剩余空间，填满父容器
• .w-100：确保每个表单控件填满所在的列
• .g-3：控制列之间的间距，.align-items-center让所有控件垂直居中
• 这种方式在小屏幕上会自动切换成垂直排列，体验更友好，还能通过替换.col-auto为.col-md-3这类栅格类，自定义不同屏幕尺寸下的控件宽度比例

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