仅从断点“md”引导具有等宽的 5 列答案

【问题标题】：Bootstrap 5 columns with equal-width only from breakpoint "md"仅从断点“md”引导具有等宽的 5 列
【发布时间】：2021-09-18 20:54:43
【问题描述】：

我在 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”等宽开始的列？

【问题讨论】：

标签： twitter-bootstrap grid breakpoints bootstrap-5 col

【解决方案1】：

我最近answered here，这是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

【讨论】：