Bootstrap 5 - 使列宽尽可能窄

Question

使用 Bootstrap 5 的网格系统，有什么方法可以使列尽可能窄到内部内容允许的范围内？ 换句话说，一列可以响应地调整其最宽子项的宽度吗？ 换句话说，我可以有一个没有额外水平空格的列吗？

HTML 表会自动发生这种情况。 有人可以帮助我使用 div 和 Bootstrap 类来反映这种行为吗？ 还是表格是完成此任务的唯一方法？ 我不想明确指定列宽（例如.col-md-1 ）。

<table>
  <tr>
    <td>Name</td>
    <td><input type="text" name="name"></td>
  </tr>
  <tr>
    <td>Favorite Color</td>
    <td><input type="text" name="color"></td>
  </tr>
</table>

Output (good):
Name            ________________
Favorite Color  ________________

<div class="container">
  <div class="row">
    <div class="col">Name</div>
    <div class="col"><input type="text" name="name"></div>
  </div>
  <div class="row">
    <div class="col">Favorite Color</div>
    <div class="col"><input type="text" name="color"></div>
  </div>
</div>

Output (bad):
Name                              ________________
Favorite Color                    ________________