html - 如何按比例调整 Bootstrap 网格内的 div 大小？

Question

尽管我阅读了如此多的在线资源，但我仍然在努力完全理解 css/html 框模型。特别是我正在尝试创建一些比例为 3*2 的部分，其中 3 是宽度，2 是高度。

我尝试使用 scss 变量是徒劳的:

.boxProject{
  width: 90%;
  height: calc((width/3) *2);
  background: purple;
  box-shadow: 0 4px 30px rgba(0,0,0,.5);
  border-radius: 6px;
}

此外，Bootstrap 网格对我来说毫无意义，因为如果我插入 h-100 类，那么网格会溢出它的 div 容器，我还没有找到方法使 div 在较小的屏幕上“可调整大小”，其中内容一个一个地显示在另一个屏幕下方，导致宽度变窄但高度变长。

.projectSection{
  width: 100%;
  height: 100%;
}

#section4 h1 {
  margin:auto;
  background-image: linear-gradient(to right, #62daf5, #59c8f4, #52aef9, #4586f7);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  font-family: 'Rubik', sans-serif;
  font-weight: bold;
}

.boxProject{
  width: 90%;
  height: calc((width/3) *2);
  background: purple;
  box-shadow: 0 4px 30px rgba(0,0,0,.5);
  border-radius: 6px;
}

#section4{
  background-color: black;
  width: 100%;
  height:100%;
}

<div class="container-fluid" id="section4">

        <div class="row mt-5">
            <div class="col-12">
                <h1> My Projects. </h1>
            </div>
        </div>

        <div class="row h-75 w-100 mt-4">
            <div class="col-6 col-md-6 col-lg-4 col-xl-4">
                <div class="boxProject"> </div>
            </div>

            <div class="col-6 col-md-6 col-lg-4 col-xl-4">
                <div class="boxProject"> </div>
            </div>

            <div class="col-6 col-md-6 col-lg-4 col-xl-4">
                <div class="boxProject"> </div>
            </div>

            <div class="col-6 col-md-6 col-lg-4 col-xl-4">
                <div class="boxProject"> </div>
            </div>

            <div class="col-6 col-md-6 col-lg-4 col-xl-4">
                <div class="boxProject"> </div>
            </div>

            <div class="col-6 col-md-6 col-lg-4 col-xl-4">
                <div class="boxProject"> </div>
            </div>

        </div>

</div>

Answer 1

除非您将 width 声明为 SCSS 变量，否则您不能将 width 用作计算的一部分。相反，您可以这样做:calc((90vw/3) * 2)，其中 90vw 基本上是视口(viewport)宽度的 90%。将其用作变量:

// declare the variable
$width: '90vw';

// style block 
.boxProject {
    width: 90%;
    height: calc((#{$width} / 3) * 2); // note the variable is declared inside #${}
    background: purple;
    box-shadow: 0 4px 30px rgba(0,0,0,.5);
    border-radius: 6px;
}