修复Bootstrap 5全屏布局适配问题：无滚动且占满100%宽高

以下是修复后的代码，可在16:9比例的全屏设备（移动端、桌面端1080p/2160p）中实现100%宽高适配，无横向/纵向滚动，完全符合布局要求：

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Fullscreen Layout</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<style>
  body {
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
  .h-40 {
    height: 40%;
  }
  .h-60 {
    height: 60%;
  }
  .h-70 {
    height: 70%;
  }
  .h-30 {
    height: 30%;
  }
  .card-img-fit {
    object-fit: cover;
    height: 100%;
    width: 100%;
  }
  .card-full-height {
    height: 100%;
    margin: 0;
  }
</style>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</head>

<body>
<div class="d-flex flex-column h-100">
  <!-- 第一行：占总高度40% -->
  <div class="row h-40 g-0">
    <div class="card card-full-height w-100">
      <div class="row g-0 h-100">
        <div class="col-md-4 h-100">
          <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/16x9_by_Pengo.svg/1280px-16x9_by_Pengo.svg.png" class="card-img-fit rounded-start" alt="...">
        </div>
        <div class="col-md-8 d-flex align-items-center justify-content-center">
          <div class="card-body text-center">
            <h5 class="card-title">Have a nice day!</h5>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 第二行：占总高度60% -->
  <div class="row h-60 g-1 row-cols-5">
    <div class="col p-1">
      <div class="card card-full-height">
        <div class="row g-0 h-100">
          <div class="col-12 h-70">
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/16x9_by_Pengo.svg/1280px-16x9_by_Pengo.svg.png" class="card-img-fit" alt="...">
          </div>
          <div class="col-12 h-30 d-flex align-items-center justify-content-center">
            <div class="card-body text-center">
              <h5 class="card-title">Hello 1</h5>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col p-1">
      <div class="card card-full-height">
        <div class="row g-0 h-100">
          <div class="col-12 h-70">
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/16x9_by_Pengo.svg/1280px-16x9_by_Pengo.svg.png" class="card-img-fit" alt="...">
          </div>
          <div class="col-12 h-30 d-flex align-items-center justify-content-center">
            <div class="card-body text-center">
              <h5 class="card-title">Hello 2</h5>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col p-1">
      <div class="card card-full-height">
        <div class="row g-0 h-100">
          <div class="col-12 h-70">
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/16x9_by_Pengo.svg/1280px-16x9_by_Pengo.svg.png" class="card-img-fit" alt="...">
          </div>
          <div class="col-12 h-30 d-flex align-items-center justify-content-center">
            <div class="card-body text-center">
              <h5 class="card-title">Hello 3</h5>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col p-1">
      <div class="card card-full-height">
        <div class="row g-0 h-100">
          <div class="col-12 h-70">
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/16x9_by_Pengo.svg/1280px-16x9_by_Pengo.svg.png" class="card-img-fit" alt="...">
          </div>
          <div class="col-12 h-30 d-flex align-items-center justify-content-center">
            <div class="card-body text-center">
              <h5 class="card-title">Hello 4</h5>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col p-1">
      <div class="card card-full-height">
        <div class="row g-0 h-100">
          <div class="col-12 h-70">
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/16x9_by_Pengo.svg/1280px-16x9_by_Pengo.svg.png" class="card-img-fit" alt="...">
          </div>
          <div class="col-12 h-30 d-flex align-items-center justify-content-center">
            <div class="card-body text-center">
              <h5 class="card-title">Hello 5</h5>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

关键修改说明： #

• 重置全局样式：消除body默认边距，禁用滚动条，确保视口完全被内容填充
• 自定义高度类：新增.h-40、.h-60、.h-70、.h-30实现精准的高度比例分配
• 图片适配：使用object-fit: cover确保图片按比例填充容器，避免拉伸变形
• 容器高度控制：所有card设置为height: 100%并移除默认margin，确保完全填满父容器
• 列间距优化：用g-1和p-1控制行列间距，避免内容溢出视口
• 内容居中：添加d-flex align-items-center justify-content-center让文本在容器内垂直水平居中

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