如何使用引导程序 4 使带有小部件的三列布局的高度与宽度相同

Question

我有一个仪表板页面，上面有连续 3 个小部件。（它们是图表）。我想让他们有求必应。 图表的大小取决于父容器。我希望这三个小部件占据屏幕的整个宽度，然后高度应该等于宽度。

如何使用引导程序 4 实现这一目标？如果需要，我可以使用 JS

Answer 1

使用三个div.col.p-0引导div.row，然后使用vw单位设置图表相对于视口宽度的高度（方形宽高比为 33.33vw）

.square-charts canvas {
  border: 1px solid black;
  width: 100%;
  height: 33.33vw;
}
.rect-charts canvas {
  border: 1px solid black;
  width: 100%;
  height: 100vw;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row square-charts">
    <div class="col p-0">
      <canvas id="Chart1"></canvas>
    </div>
    <div class="col p-0">
      <canvas id="Chart2"></canvas>
    </div>
    <div class="col p-0">
      <canvas id="Chart3"></canvas>
    </div>
  </div>
  <div class="row rect-charts">
    <div class="col p-0">
      <canvas id="Chart6"></canvas>
    </div>
    <div class="col p-0">
      <canvas id="Chart5"></canvas>
    </div>
    <div class="col p-0">
      <canvas id="Chart6"></canvas>
    </div>
  </div>
</div>

Answer 2

按照这个问题，我认为那个人分享了你的问题。