为什么我的容器流体 div 也不包括盒子 div？答案

【问题标题】：Why is my container-fluid div not including the box divs as well?为什么我的容器流体 div 也不包括盒子 div？
【发布时间】：2022-10-05 16:29:11
【问题描述】：

我正在尝试在引导网格的帮助下掷骰子。虽然我还没有完成它，但这里是包含我所写内容的小 sn-p 代码。当我使用开发工具（附图片）检查我的网页时，我的容器流体 div 基本上包含我的所有代码，但没有显示包含框 div？你能解释一下为什么会这样吗？我还附上了我的 HTML 和 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;
  }
}

<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: 100%;}。 height in percentge 可能会很棘手，因为他们需要一个定义了 height 的父级。如果您删除它，.box 高度将成为您的.row 高度的一部分。您可以将aspect-ratio: 1; 添加到您的.box 而不是height。

标签： html css bootstrap-5

【解决方案1】：

我看到您已经注释掉了唯一适用于黄色框内点的样式，但总的来说，问题是引导网格不继承任何高度，并且您定义的 height: 100% 来了输出为 0。如果您将 .circle1 高度更改为固定大小或将高度应用于点行，那么它会显示出来。

【讨论】：