bootstrap 缺少 'grid' 和 'g-col-*' 类

ql3eal8s  于 4个月前  发布在  Bootstrap
关注(0)|答案(1)|浏览(99)

先决条件

描述问题

在使用Bootstrap v5.3.3时,我在文档中关于某些CSS类的使用方面遇到了潜在的不一致性。
在Spacing Utilities文档的“Gap”部分,提供了以下示例:

<div class="grid gap-3">
  <div class="p-2 g-col-6">Grid item 1</div>
  <div class="p-2 g-col-6">Grid item 2</div>
  <div class="p-2 g-col-6">Grid item 3</div>
  <div class="p-2 g-col-6">Grid item 4</div>
</div>

在尝试将此示例复制到项目中时,我注意到通过CDN提供的Bootstrap CSS中不存在grid和g-col-6这两个类( https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css )。相反,这些类似乎在专门用于Bootstrap文档的 docs.css 文件中定义。
为了说明这一点,我创建了一个 CodePen example 。在这个例子中:

  • 仅包含Bootstrap CSS不会像文档中那样渲染网格布局。
  • 添加docs.css文件使网格布局按预期工作。
    问题:
  1. grid和g-col-*类是Bootstrap的核心CSS的一部分,还是仅在文档中使用的专用自定义类?
  2. 如果这些类不是Bootstrap核心的一部分,是否有可能在文档中澄清它们的用法,以防止开发人员产生混淆?
    了解文档特定样式与核心Bootstrap样式之间的区别对于旨在准确实现功能的开发人员至关重要。对此事项的任何澄清将不胜感激。

减少的测试用例

CodePen: Bootstrap Grid Gap Example

您正在哪个操作系统上看到问题?

Windows

您正在哪个浏览器上看到问题?

Chrome

您正在使用哪个版本的Bootstrap?

v5.3.3

xghobddn

xghobddn1#

我认为你更新了CDN,但npm包仍然缺少这些类。

相关问题