Bootstrap中col内部div无border时无法铺满高度的解决方法

问题场景 #

在Bootstrap的col容器里放置div时，只有给div加border类，它才会看起来填满整个col的高度；一旦移除border，div的背景色就只能覆盖自身内容区域，没法铺满col的全部高度。

核心原因 #

col作为Bootstrap栅格系统里的列容器，默认是块级元素，内部的div高度默认由自身内容撑开。加border时只是视觉上让div边缘和col对齐，并非div本身真的填满了col的高度。

非hack解决方案 #

直接用Bootstrap官方提供的flex工具类来实现，完全符合规范：

• 给每个col添加d-flex类，把col转为flex容器
• 给内部的div添加flex-grow-1类，让它在flex容器里自动填充剩余高度

修改后的代码示例 #

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css">
    <script src="css/bootstrap/bootstrap.bundle.min.js" defer></script>
</head>
<body>
     <div class="container text-center">
      <div class="row row-cols-3 g-2">
          <div class="col border border-danger d-flex">
              <div class="bg-danger-subtle flex-grow-1">
                  <p>hello</p>
              </div>
          </div>
          <div class="col border border-danger d-flex">
              <div class="bg-danger-subtle flex-grow-1">
                  <p>hello</p>
              </div>
          </div>
          <div class="col border border-danger d-flex">
              <div class="bg-danger-subtle flex-grow-1">
                  <p>hello</p>
              </div>
          </div>
          <div class="col border border-danger d-flex">
              <div class="bg-danger-subtle flex-grow-1">
                  <p>hello</p>
              </div>
          </div>
          <div class="col border border-danger d-flex">
              <div class="bg-danger-subtle flex-grow-1">
                  <p>hello</p>
              </div>
          </div>
          <div class="col border border-danger d-flex">
              <div class="bg-danger-subtle flex-grow-1">
                  <p>hello</p>
              </div>
          </div>
          <div class="col border border-danger d-flex">
              <div class="bg-danger-subtle flex-grow-1">
                  <p>hello</p>
              </div>
          </div>
          <div class="col border border-danger d-flex">
              <div class="bg-danger-subtle flex-grow-1">
                  <p>hello</p>
              </div>
          </div>
          <div class="col border border-danger d-flex">
              <div class="bg-danger-subtle flex-grow-1">
                  <p>hello</p>
              </div>
          </div>
      </div>
     </div>
</body>
</html>

补充说明 #

如果不需要col的红色边框，直接删掉border border-danger类就行，内部div依然能铺满col的高度。这种方法完全依赖Bootstrap原生工具类，没有自定义CSS或投机取巧的hack手段，是官方推荐的布局方式。

内容的提问来源于stack exchange，提问作者a regular coder