如何将 bootstrap 5 网格混合和匹配用作 bootstrap 4？答案

【问题标题】：How can I use bootstrap 5 grid mix and match as bootstrap 4?如何将 bootstrap 5 网格混合和匹配用作 bootstrap 4？
【发布时间】：2021-10-08 18:24:59
【问题描述】：

我在 Angular 12 项目中使用 bootstrap 4 有一段时间了，今天我升级到了 bootstrap 5。我知道一些属性已经改变，但我读到网格系统是相同的。

我经常使用文档中所写的“混合搭配”列，例如

<div class="container">
  <div class="row">
    <div class="col-12 col-sm"></div>
    <div class="col-12 col-sm-auto"></div>
    <div class="col-12 col-sm"></div>
  </div>
</div>

这个例子在 Bootstrap v4.* 上运行得很好，但在 v5 上却不行。

它应该只有 1 行，其中第一列和第三列尝试获取所有可用空间，第二列适合您的内容。

我在 Chrome DevTools 上看到 col-12 类优先于 col-sm 类，即使在更大的屏幕上也是如此。

有什么办法可以解决这个问题吗？

【问题讨论】：

这应该可以用 bs5，我只是不明白你的确切要求：所以第一个和第三个 col 总是相等的宽度（例如 col-2）并且中间列占据了所有休息区？
@cloned 中间一栏适合你自己的内容，第一和第三栏如你所说。这就是我想要的 -> 例如（1ºCol = 45% 2ºCol = 10% 3ºCol = 45%）在“sm”断点上。

标签： css angular bootstrap-4 sass bootstrap-5

【解决方案1】：

正如我最近answered here，这是bug that was introduced in 5.0.2，因为列声明的顺序已更改，使 col-12 在所有断点上覆盖 col-sm。

在修复之前，您的解决方法是简单地删除 col-12（不需要，因为 col-12 是默认值）...

<div class="container">
  <div class="row">
    <div class="col-sm">col</div>
    <div class="col-sm-auto">col</div>
    <div class="col-sm">col</div>
  </div>
</div>

https://codeply.com/p/gUgPktyAyA

【讨论】：

对不起，我找不到你提到的帖子。我可以从我的整个项目中删除 col-12 并只使用断点（例如 col-sm col-md-6 col-lg-12），因为 col-12 是默认设置，或者您认为他们会解决这个问题并返回以前的解决方案？
Bootstrap 5.1 已发布：您的旧代码正在运行：codeply.com/p/n9aqzTWoGq
幸运的是，我回滚到 Bootstrap 4 期待这个修复。好消息，现在我又可以更新了；）