使用Canvas时Bootstrap边距导致列换行的问题

Bootstrap的col-6默认占父容器50%宽度，但给列添加mx-*（外边距）时，元素总宽度会超过50%，导致两列总宽度突破100%触发换行。另外Chart.js默认maintainAspectRatio: true会让canvas保持固定宽高比，当列宽度被压缩时，canvas无法自适应收缩，进一步加剧溢出问题。

方案1：用Bootstrap gutter类设置列间距 #

Bootstrap 5的row支持g-*类直接控制列之间的间距，无需给列加外边距，不会破坏宽度计算：

<div class="row p-2 bg-dark g-3"> <!-- g-3设置列间距，数值可选1-5 -->
  <div class="col-6 bg-white shadow rounded">
    <h3>Col1</h3>
    <canvas id="bar-chart"></canvas>
  </div>
  <div class="col-6 bg-white shadow rounded">
    <h3>Col2</h3>
    <canvas id="bar-chart2"></canvas>
  </div>
</div>

方案2：关闭Chart.js默认宽高比 #

把maintainAspectRatio设为false，让canvas完全适配父容器宽度，同时给canvas固定高度避免变形：

var options = {
  maintainAspectRatio: false, // 关闭默认宽高比
  responsive: true, // 确保响应式（默认开启，可显式声明）
  scales: {
    y: {
      stacked: true,
      grid: {
        display: true,
        color: "rgba(255,99,132,0.2)"
      }
    },
    x: {
      grid: {
        display: false
      }
    }
  }
};

给canvas加高度样式：

<canvas id="bar-chart" style="height: 300px;"></canvas>

方案3：给列内内容加内边距 #

如果需要内边距，不要给列本身加，而是在列内套一个容器加内边距，这样不会增加列的总宽度：

<div class="col-6 bg-white shadow rounded">
  <div class="p-3"> <!-- 内边距加在这里 -->
    <h3>Col1</h3>
    <canvas id="bar-chart"></canvas>
  </div>
</div>

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>

<div class="container-fluid">
  <div class="row p-2 bg-dark g-3">
    <div class="col-6 bg-white shadow rounded">
      <div class="p-3">
        <h3>Col1</h3>
        <canvas id="bar-chart" style="height: 300px;"></canvas>
      </div>
    </div>
    <div class="col-6 bg-white shadow rounded">
      <div class="p-3">
        <h3>Col2</h3>
        <canvas id="bar-chart2" style="height: 300px;"></canvas>
      </div>
    </div>
  </div>
</div>

var data = {
  labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
  datasets: [{
    label: "Dataset #1",
    backgroundColor: "rgba(255,99,132,0.2)",
    borderColor: "rgba(255,99,132,1)",
    borderWidth: 2,
    hoverBackgroundColor: "rgba(255,99,132,0.4)",
    hoverBorderColor: "rgba(255,99,132,1)",
    data: [65, 59, 20, 81, 56, 55, 40],
  }]
};

var options = {
  maintainAspectRatio: false,
  responsive: true,
  scales: {
    y: {
      stacked: true,
      grid: {
        display: true,
        color: "rgba(255,99,132,0.2)"
      }
    },
    x: {
      grid: {
        display: false
      }
    }
  }
};

new Chart('bar-chart', {
  type: 'bar',
  options: options,
  data: data
});

new Chart('bar-chart2', {
  type: 'bar',
  options: options,
  data: data
});

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