本文介绍了在使用 Bootstrap 5.2 的 CSS Grid 系统时，`.g-col-*` 类占据全部宽度而非期望比例的问题。核心原因是 CSS Grid 默认未启用。文章将指导你如何启用 CSS Grid，从而正确使用 Bootstrap 5.2 的 Grid 布局。
在使用 Bootstrap 5.2 的 CSS Grid 系统时，你可能会遇到一个问题：即使使用了 .g-col-* 类来定义列的宽度，这些列仍然占据了整个容器的宽度，而不是按照预期的比例进行划分。这通常是因为 Bootstrap 5.2 的 CSS Grid 系统默认是禁用的。
要解决这个问题，你需要手动启用 CSS Grid。以下是详细步骤：
启用 CSS Grid
Bootstrap 使用 Sass 变量进行配置。你需要修改 Bootstrap 的 Sass 变量 $enable-cssgrid 的值为 true。
找到 Bootstrap 的 Sass 文件： 首先，你需要找到你的项目中 Bootstrap 的 Sass 文件的位置。通常，这会是一个名为 bootstrap.scss 或类似的名称的文件。如果你是通过 npm 或 yarn 安装的 Bootstrap，这个文件可能位于 node_modules/bootstrap/scss/ 目录下。
-
创建自定义 Sass 文件： 最佳实践是不要直接修改 node_modules 目录下的文件。创建一个你自己的 Sass 文件（例如 custom.scss），并在其中导入 Bootstrap 的 Sass 文件。
// custom.scss // 导入 Bootstrap 变量 @import "node_modules/bootstrap/scss/functions"; @import "node_modules/bootstrap/scss/variables"; @import "node_modules/bootstrap/scss/variables-dark"; @import "node_modules/bootstrap/scss/maps"; @import "node_modules/bootstrap/scss/mixins"; @import "node_modules/bootstrap/scss/utilities"; // 覆盖 Bootstrap 变量 $enable-cssgrid: true; // 导入 Bootstrap @import "node_modules/bootstrap/scss/bootstrap"; // 你的自定义样式
-
编译 Sass 文件： 使用 Sass 编译器（例如 sass 或 node-sass）将你的 custom.scss 文件编译成 CSS 文件。
sass custom.scss custom.css
-
引入编译后的 CSS 文件： 在你的 HTML 文件中，引入编译后的 custom.css 文件，确保它在 Bootstrap 的 CSS 文件之后引入。
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="custom.css">
示例代码
以下是一个简单的示例，展示了如何使用 Bootstrap 5.2 的 CSS Grid 系统，以及启用 CSS Grid 后的效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 5.2 Grid Example</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="custom.css"> <!-- 引入编译后的自定义 CSS -->
<style>
.grid {
background-color: #f0f0f0;
padding: 10px;
}
.g-col-4 {
background-color: #ddd;
border: 1px solid #ccc;
padding: 10px;
}
</style>
</head>
<body>
<div class="grid text-center">
<div class="g-col-4">.g-col-4</div>
<div class="g-col-4">.g-col-4</div>
<div class="g-col-4">.g-col-4</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>确保你已经按照上述步骤启用了 CSS Grid，然后运行这段代码。你应该会看到三个 .g-col-4 元素并排排列，每个元素占据容器宽度的三分之一。
注意事项
- 确保你的 Sass 编译器版本与 Bootstrap 兼容。
- 在覆盖 Bootstrap 变量时，确保在导入 Bootstrap 之前进行覆盖。
- 仔细检查你的 CSS 文件引入顺序，确保自定义 CSS 文件在 Bootstrap CSS 文件之后引入。
总结
通过启用 Bootstrap 5.2 的 CSS Grid 系统，你可以更灵活地控制页面的布局。记住，CSS Grid 默认是禁用的，你需要手动设置 $enable-cssgrid: true 来启用它。通过修改 Sass 变量并重新编译 CSS 文件，你可以轻松地解决 .g-col-* 类占据全部宽度的问题，并充分利用 Bootstrap 5.2 的 Grid 布局功能。
