为何container-fluid容器无法包含box元素？Bootstrap布局问题咨询

我正在使用Bootstrap Grid组件制作骰子，目前尚未完成开发。通过浏览器开发者工具检查网页时发现，本应包裹相关内容的container-fluid div并未将box div包含在内，求解释该问题的原因。

相关代码 #

CSS代码 #

body {
  background-color: rgb(41, 36, 36);
  text-align: center;
  font-family: 'Bungee Spice', cursive;
  margin: auto;
}

h2 {
  margin-bottom: 10%;
  margin-top: 10%;
}

.result {
  font-size: 500%;
  margin: 5% auto;
}

.box {
  width: 60%;
  height: 180%;
  /* padding-bottom: 60%; */
  background-color: yellow;
  margin: auto;
  border-radius: 10%;
}

.container-fluid {
  margin-bottom: 5%;
}

/* .circle1 {
    background-color: black;
    width: 100%;
    height: 100%;
    border-radius: 50%;
} */

/* .box-row {
    width: 100%;
    padding-bottom: 10%;
    margin: auto;
    background-color: red;
} */

@media (max-width: 1300px) {
  .result {
    font-size: 400%;
  }
}

@media (max-width: 1100px) {
  .result {
    font-size: 300%;
  }
}

@media (max-width: 991px) {
  button {
    display: block;
  }
}

HTML代码 #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bungee+Spice&display=swap" rel="stylesheet">

<h1 class="result">Welcome, <span class="playerName"></span></h1>

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-3 col-md-3 col-sm-3"></div>

    <div class="col-lg-3 col-md-3 col-sm-3">
      <h2>You</h2>
      <div class="box">
        <div class="row box-row">
          <div class="col-lg-4 col-md-4 col-sm-4 col-4">
            <div class="circle1"></div>
          </div>
          <div class="col-lg-4 col-md-4 col-sm-4 col-4">
            <div class="circle2"></div>
          </div>
          <div class="col-lg-4 col-md-4 col-sm-4 col-4">
            <div class="circle3"></div>
          </div>
        </div>

        <div class="row box-row">
          <div class="col-lg-4 col-md-4 col-sm-4 col-4">
            <div class="circle4"></div>
          </div>
          <div class="col-lg-4 col-md-4 col-sm-4 col-4">
            <div class="circle5"></div>
          </div>
          <div class="col-lg-4 col-md-4 col-sm-4 col-4">
            <div class="circle6"></div>
          </div>
        </div>

        <div class="row box-row">
          <div class="col-lg-4 col-md-4 col-sm-4 col-4">
            <div class="circle7"></div>
          </div>
          <div class="col-lg-4 col-md-4 col-sm-4 col-4">
            <div class="circle8"></div>
          </div>
          <div class="col-lg-4 col-md-4 col-sm-4 col-4">
            <div class="circle9"></div>
          </div>
        </div>
      </div>
    </div>

    <div class="col-lg-3 col-md-3 col-sm-3">
      <h2>Computer</h2>
      <div class="box">
        <div class="row">
          <div class="col-lg-4 col-md-4 col-sm-4 col-4">
            <div class="circle1"></div>
          </div>
          <div class="col-lg-4 col-md-4 col-sm-4 col-4">
            <div class="circle2"></div>
          </div>
          <div class="col-lg-4 col-md-4 col-sm-4 col-4">
            <div class="circle3"></div>
          </div>
        </div>

        <div class="row">
          <div class="col-lg-4 col-md-4 col-sm-4 col-4">
            <div class="circle4"></div>
          </div>
          <div class="col-lg-4 col-md-4 col-sm-4 col-4">
            <div class="circle5"></div>
          </div>
          <div class="col-lg-4 col-md-4 col-sm-4 col-4">
            <div class="circle6"></div>
          </div>
        </div>

        <div class="row">
          <div class="col-lg-4 col-md-4 col-sm-4 col-4">
            <div class="circle7"></div>
          </div>
          <div class="col-lg-4 col-md-4 col-sm-4 col-4">
            <div class="circle8"></div>
          </div>
          <div class="col-lg-4 col-md-4 col-sm-4 col-4">
            <div class="circle9"></div>
          </div>
        </div>
      </div>
    </div>

    <div class="col-lg-3 col-md-3 col-sm-3"></div>
  </div>
</div>

<button type="button" class="btn btn-outline-warning">Roll</button>

网页检查截图 #

原因分析 #

• 核心问题出在.box的height: 180%设置：百分比高度的计算依赖于父元素的明确高度，但.box的直接父元素是Bootstrap的列容器（.col-lg-3等），这类容器默认没有设置固定高度，导致180%的高度无法基于有效父元素高度计算，最终.box会脱离父容器的约束，溢出到container-fluid外部，视觉上看起来像是container-fluid没包含它。
• Bootstrap的网格系统中，列容器的高度默认由内部内容撑开，当子元素使用百分比高度但父元素无明确高度时，子元素的高度会超出父容器范围。

解决方案 #

• 替换.box的height: 180%为固定高度值，比如height: 200px，这样可以明确控制骰子的高度，避免溢出；
• 如果你需要自适应的正方形骰子，可以启用你注释掉的padding-bottom: 60%，同时将height: 180%改为height: 0，利用padding-bottom的百分比基于宽度计算的特性，实现完美的正方形比例；
• 或者给.box的父元素（列容器）设置明确的高度，比如.col-lg-3 { height: 300px; }，这样.box的height: 180%就能基于父元素高度计算。

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