如何在引导网格内按比例调整 div 的大小？答案

【问题标题】：How resize proportionally a div inside a bootstrap grid?如何在引导网格内按比例调整 div 的大小？
【发布时间】：2019-11-23 05:27:14
【问题描述】：

尽管我阅读了如此多的在线资源，但我仍在努力完全理解 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>

【问题讨论】：

标签： html css twitter-bootstrap sass

【解决方案1】：

除非您将 width 声明为 SCSS 变量，否则您不能使用 width 作为计算的一部分。相反，您可以这样做：calc((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;
}

【讨论】：

【解决方案2】：

Bootstrap 与断点一起工作，这意味着当您的显示小于 1200px 时，网格将缩小到 large screens。所以调整大小与引导无关。但是，如果你想调整 div 的大小，你可以简单地添加这个 css sn -p：

.resizable {
     resize: vertical;
     overflow: auto; /* Or hidden */
}

这也应该适用于col's

在此处查看代码笔：https://codepen.io/Throvn/pen/OJJGExy

【讨论】：