Bootstrap 5.2 CSS Grid组件占满整宽问题排查求助

你犯的问题很明确：Bootstrap 5.2的.grid类默认是单列布局（grid-template-columns: repeat(1, minmax(0, 1fr))），所以每个.g-col-4元素都会自动占满整行宽度。

要实现三个等宽列的效果，只需要给父容器的.grid类加上.grid-cols-12类——因为Bootstrap的CSS Grid基于12列系统，.g-col-4代表每列占12份里的4份，父容器声明12列后，三个.g-col-4就能刚好填满一行。

修正后的代码如下：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.5/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>

<div class="grid text-center grid-cols-12">
  <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>

另外补充一点：如果是响应式场景，你还可以用类似.grid-cols-md-12这样的断点类，实现不同屏幕尺寸下的列数变化。

内容的提问来源于stack exchange，提问作者dokgu