Html 如何在引导网格中按比例调整div的大小？

尽管我在网上读了很多资料，但我仍然很难完全理解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;
}

此外，引导网格对我来说毫无意义，因为如果我插入

h-100

类，那么网格就会溢出它的div容器，而且我还没有找到一种方法使div“可调整大小”，特别是在较小的屏幕上，其中内容一个接一个地显示，导致宽度较窄，但高度较长

.projectSection{
宽度：100%；
身高：100%；
}
#第4节h1{
保证金：自动；
背景图像：线性渐变（向右，#62daf5，#59c8f4，#52aef9，#4586f7）；
-webkit文本填充颜色：透明；
-webkit背景剪辑：文本；
字体系列：“Rubik”，无衬线；
字体大小：粗体；
}
.boxProject{
宽度：90%；
高度：计算（（宽度/3）*2）；
背景：紫色；
盒影：0 4px 30px rgba（0,0,0,5）；
边界半径：6px；
}
#第四节{
背景色：黑色；
宽度：100%；
身高：100%；
}

我的项目。

除非将

宽度

声明为SCSS变量，否则不能将

宽度

用作计算的一部分。相反，可以这样做：

计算（（90vw/3）*2）

，其中90vw基本上是视口宽度的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;
}

---

引导与断点一起工作，这意味着当显示器小于1200px（即

1200px

时，网格将缩小为

大屏幕

。 因此，调整大小与引导无关。但是，如果要调整

div

的大小，只需添加以下css片段：

。可调整大小{
调整大小：垂直；
溢出：自动；/*或隐藏*/
}

这也适用于

col

请参见此处的代码笔：