Bootstrap 5 列等宽仅来自断点 "md"

Question

我在 Bootstrap 4 中多次使用此代码（在移动列上具有全宽 - 从“md”开始，列具有等宽）：

<div class="container">
  <div class="row">
    <div class="col-12 col-md">
      1 of 2
    </div>
    <div class="col-12 col-md">
      2 of 2
    </div>
    <div class="col-12 col-md">
      3 of 3
    </div>
    <div class="col-12 col-md">
      4 of 4
    </div>
    <div class="col-12 col-md">
      5 of 5
    </div>
  </div>
</div>

如果我在 Bootstrap 5 中使用此代码，“col-12”会覆盖“col-md”。

如何在移动设备上使用 Bootstrap 5 使列全宽并从“md”开始等宽？

Answer 1

因为我最近 , this is a bug that was introduced in 5.0.2.

在修复之前，您的解决方法是改用 row-cols-*...

<div class="container">
  <div class="row row-cols-1 row-cols-md-5">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
    <div class="col">
      3 of 3
    </div>
    <div class="col">
      4 of 4
    </div>
    <div class="col">
      5 of 5
    </div>
  </div>
</div>

https://codeply.com/p/BusA6Eyw8K