如何用Bootstrap 4实现三列等高宽响应式仪表盘小部件布局

嘿，这个需求我刚好在项目里实现过，用Bootstrap 4加一点点CSS或者JS就能搞定，我给你详细说下具体方案：

核心思路 #

我们要实现三个均分屏幕宽度的正方形图表，关键在于两点：一是用Bootstrap网格系统让三列自动占满整行，二是让每个图表容器的高度等于宽度，同时支持响应式变化。

方案一：纯CSS实现（推荐，无JS依赖） #

这种方法利用CSS的padding-top百分比特性（百分比是相对于元素宽度计算的），轻松实现正方形容器，完全不需要JS，性能更好。

1. HTML结构

用container-fluid去掉默认的左右内边距，row no-gutters消除列之间的间距，三个col自动均分宽度：

<div class="container-fluid p-0">
  <div class="row no-gutters">
    <!-- 第一个图表 -->
    <div class="col">
      <div class="chart-wrapper">
        <div class="chart-content">
          <!-- 这里放你的图表，比如Chart.js的canvas -->
          <canvas id="chart1"></canvas>
        </div>
      </div>
    </div>
    <!-- 第二个图表 -->
    <div class="col">
      <div class="chart-wrapper">
        <div class="chart-content">
          <canvas id="chart2"></canvas>
        </div>
      </div>
    </div>
    <!-- 第三个图表 -->
    <div class="col">
      <div class="chart-wrapper">
        <div class="chart-content">
          <canvas id="chart3"></canvas>
        </div>
      </div>
    </div>
  </div>
</div>

2. CSS样式

通过padding-top: 100%让容器高度等于宽度，然后用绝对定位让图表填充整个正方形区域：

.chart-wrapper {
  position: relative;
  width: 100%;
  padding-top: 100%; /* 1:1 宽高比，高度等于宽度 */
}

.chart-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 1rem; /* 可选，给图表加一点内边距，避免贴边 */
}

方案二：JS动态计算（适合需精确控制高度的场景） #

如果你的图表库需要明确的高度值，或者有特殊的动态调整需求，可以用JS监听窗口大小变化，实时设置图表高度等于宽度。

1. HTML结构

和方案一基本一致，不需要特殊的CSS结构：

<div class="container-fluid p-0">
  <div class="row no-gutters">
    <div class="col">
      <div class="chart-content">
        <canvas id="chart1"></canvas>
      </div>
    </div>
    <div class="col">
      <div class="chart-content">
        <canvas id="chart2"></canvas>
      </div>
    </div>
    <div class="col">
      <div class="chart-content">
        <canvas id="chart3"></canvas>
      </div>
    </div>
  </div>
</div>

2. CSS基础样式

.chart-content {
  width: 100%;
  /* 初始高度可以随便设，JS会覆盖 */
  height: 300px;
  padding: 1rem;
}

3. JS代码

监听页面加载和窗口 resize 事件，动态设置高度：

// 设置图表高度等于宽度的函数
function setSquareHeight() {
  document.querySelectorAll('.chart-content').forEach(el => {
    const width = el.offsetWidth;
    el.style.height = `${width}px`;
  });
}

// 页面加载完成后初始化
window.addEventListener('load', setSquareHeight);

// 窗口大小变化时重新计算
window.addEventListener('resize', setSquareHeight);

额外提示（针对Chart.js等图表库） #

如果用Chart.js这类库，窗口resize时除了调整容器高度，还要调用图表实例的resize()方法让图表重新渲染：

// 假设你已经初始化了三个图表实例
const chartInstances = [
  new Chart(document.getElementById('chart1'), {/* 配置项 */}),
  new Chart(document.getElementById('chart2'), {/* 配置项 */}),
  new Chart(document.getElementById('chart3'), {/* 配置项 */})
];

// 调整resize处理函数
function handleResize() {
  setSquareHeight();
  chartInstances.forEach(chart => chart.resize());
}

window.addEventListener('resize', handleResize);

这样不管屏幕怎么变，三个图表都会始终保持正方形，并且占满整个屏幕宽度，完全符合你的需求～

内容的提问来源于stack exchange，提问作者Greg Gum