如何阻止Bootstrap 5输入框自适应CSS网格单元格高度

我编写了如下Bootstrap 5代码示例：第一个示例效果不符合预期，我不希望Bootstrap输入框与CSS网格单元格高度一致；第二个示例效果正确，但我不想使用包裹div。请问有没有无需使用包裹div就能实现相同效果的方法？另外说明：我刻意不使用Bootstrap网格系统，只想使用CSS grid。

代码片段 #

CSS #

.my-grid {
  display: grid;
  grid-template-columns: auto 1fr;
}

.grid-cell {
  width: 20px;
  background-color: red;
  height: 80px;
}

HTML #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">

<h4>This is wrong</h4>
<div class="my-grid">
  <div class="grid-cell"></div>
  <input class="form-control">
</div>

<hr>

<h4>This is correct but I do not want a wrapper div</h4>
<div class="my-grid">
  <div class="grid-cell"></div>
  <div class="I-DONT-WANT-THIS-WRAPPER-DIV">
    <input class="form-control">
  </div>
</div>

问题根源是CSS Grid默认会让网格项的align-self属性值为stretch，这会导致输入框作为网格项被拉伸至与左侧单元格等高。要去掉包裹div实现预期效果，有两种简单方法：

方法1：自定义CSS样式 #

给输入框添加align-self: start属性，让它保持自身高度，不被网格容器拉伸：

.my-grid .form-control {
  align-self: start;
}

调整后的HTML无需包裹div：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">

<h4>This is now correct without wrapper div</h4>
<div class="my-grid">
  <div class="grid-cell"></div>
  <input class="form-control">
</div>

方法2：使用Bootstrap工具类 #

直接在输入框的class中加入Bootstrap内置的align-self-start工具类，无需额外编写CSS：

<input class="form-control align-self-start">

两种方式都能让输入框保持默认高度，同时完全不需要额外的包裹div。

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