Question

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

如何使用Bootstrap 4实现这一目标？如果需要的话，我可以使用JS

Answer 1

按照this的问题，我认为那个人也有你的问题。

Answer 2

使用三个div.row引导div.col.p-0，然后使用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>

如何使用小部件使三列布局的高度与使用Bootstrap 4的宽度相同

2 个答案: