如何在Bootstrap中将表单居底且元素同行排列？

直接给你改好的代码，同时说明关键修改点：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<!-- 给col-6添加flex布局和高度，让内部元素能垂直分布并定位到底部 -->
<div class="col-6 d-flex flex-column h-100">
  <div class="mb-4">
    <div class="d-flex justify-content-center">
      <h1>Product</h1>
    </div>
  </div>
  <div class="mb-4">
    <hr class="w-100" size="5" />
  </div>
  <div class="mb-4">
    <h3>price €</h3>
  </div>
  <div class="mb-4">
    <hr class="w-100" size="5" />
  </div>
  <div class="mb-4">
    <p class="lead">ART_DESIGNATION</p>
  </div>
  <!-- 用mt-auto把表单推到容器底部 -->
  <div class="mt-auto">
    <!-- 用d-flex让表单元素横向排列，align-items-center对齐垂直中线 -->
    <form action="" method="GET" class="d-flex align-items-center gap-3">
      <label class="mb-0">Quantité</label>
      <!-- 输入框加w-auto避免占满宽度，flex-shrink-0防止被压缩 -->
      <input type="number" placeholder="1" class="form-control w-auto flex-shrink-0">
      <button type="submit" class="btn btn-primary">Ajouter au panier</button>
    </form>
  </div>
</div>

关键修改说明：

• 给外层col-6加d-flex flex-column h-100：把容器变成垂直方向的弹性布局，高度占满父容器（需要确保父元素有高度，比如给html和body加h-100，或该列的父容器设置高度），这样才能用mt-auto把表单推到底部。
• 去掉position-fixed：这个属性会让表单脱离当前容器，完全无法和col-6关联定位，是之前定位失败的核心原因。
• 表单用d-flex align-items-center gap-3：直接用Bootstrap的弹性布局类让标签、输入框、按钮横向排列，gap-3控制元素间的间距，align-items-center保证垂直方向居中对齐。
• 输入框加w-auto flex-shrink-0：默认form-control是宽度100%，加w-auto让它自适应内容宽度，flex-shrink-0防止在容器变窄时被压缩变形。
• 用mt-auto替代无效的align-text-bottom：在弹性布局容器中，margin-top: auto会自动把元素推到容器的最底部。
• 把自定义的cell类换成Bootstrap的mb-4：控制各模块间的间距，更符合Bootstrap的用法（如果你的cell有自定义样式，可以保留，但要确保它不会破坏弹性布局）。

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