一些教训

我尝试添加行class ="row row-cols-xl-5"和每个内容div col-xl-1，但不起作用
列类在层次结构上比行类高，所以你在这里所做的就是用.col-xl-1强制每一列的宽度为1/12（8.33%），这覆盖了.row-cols-xl-5列宽的20%。
注意Bootstrap实际上并不是每个row都有12列，它利用width %和flex-属性（-grow，-shrink，-basis）来调整列的大小。这与使用CSS Grid不同，在CSS Grid中，我们会说div应该有span多列。
<div class="col col-12 ...">[content]</div>
类.col在这里没有任何作用，因为您还使用了.col-12。类.col在列上设置了flex-grow: 1;，它将被.col-12覆盖，.col-12设置了flex-grow: 0;，但添加了width: 100%。
我试过col-xl-auto，但似乎没有效果
使用-auto将为列提供自然（最小）宽度。它在列上设置flex-grow: 0;和width: auto;。

溶液

有没有人知道我想做什么，col-xl-something会给我标准的col操作？

• • 还记得**列类是如何覆盖行类的吗？好吧，让我们来使用它。

这将产生：

• 默认为全宽列：.row-cols-1;
• 在md断点处，两个相等的列：.row-cols-md-2;
• 在lg断点处，三个相等的列：.row-cols-lg-3;
• 在xl断点处：.col-xl列将具有flex-grow: 1;。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

<div class="container">
   <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3">
     <div class="col-xl">[content]</div>
     <div class="col-xl">[content]</div>
     <div class="col-xl">[content]</div>
     <div class="col-xl">[content]</div>
     <div class="col-xl">[content]</div>
   </div>
</div>

最后，你在问题中没有说明你理想的布局是怎样的，也没有加上卡片，所以我不能给你任何其他的解决办法，只能问你自己：我需要为我的布局指定列数吗？2在什么样的视区宽度下，布局的行为不是我想要的那样？3只有这样，才能添加列数。
因为如果你只是想要一个自由流动的卡片布局，就使用你开始提问时的布局，也许默认情况下只有堆叠的列，但在md断点处开始换行：

<div class="container">
   <div class="row">
      <div class="col-md">[content]</div>
      <div class="col-md">[content]</div>
      <div class="col-md">[content]</div>
      <div class="col-md">[content]</div>
      <div class="col-md">[content]</div>
   </div>
</div>