Bootstrap 5栅格系统多列类失效问题求助

• 问题根源：Bootstrap 5 已移除 Bootstrap 3 中的 col-xs-* 类，移动端（视口宽度 <576px）的栅格类统一改为 col-*。你代码里的 col-xs-6 在 Bootstrap 5 中不被识别，导致所有列默认堆叠成行。

• 修复后的代码：

<div class='container border'>
<div class='row border'>
<div class='col-md-2 col-6 border'> COl 1
</div>
<div class='col-md-2 col-6 border'> COl 2
</div>
<div class='col-md-2 col-6 border'> COl 3
</div>
<div class='col-md-2 col-6 border'> COl 4
</div>
<div class='col-md-2 col-6 border'> COl 5
</div>
<div class='col-md-2 col-6 border'> COl 6
</div>

</div>
</div>

• 布局逻辑：
  • col-6：视口宽度 <576px（移动端）时，每列占6份宽度，一行显示2列
  • col-md-2：视口宽度 ≥768px（桌面端）时，每列占2份宽度，一行显示6列（2×6=12，符合Bootstrap栅格12等分规则）

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