Bootstrap - 使用画布时导致列换行到下一行的边距答案

【问题标题】：Bootstrap - Margins causing columns to wrap to next line when using canvasBootstrap - 使用画布时导致列换行到下一行的边距
【发布时间】：2023-02-17 20:09:24
【问题描述】：

我试图将两个图表并排放置，并在列之间添加一些填充或边距。如果列包含文本但不使用 canvas 标记，我没有问题。如果我将它们并排放置且没有边距，则可以正常工作，但添加边距会导致图表换行到下一行。

我试过添加间距、填充、container 与 container-fluid。添加 mx-# 有时会起作用，但会在调整大小时捕捉到下一行。

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: 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
});

<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 ">
    <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>
</div>

【问题讨论】：

标签： html bootstrap-5

【解决方案1】：

由于您使用的是两个 col-6，它们占据了整个空间（12 列），因此添加边距会强制第二个进入下一行，我建议将您的内容放在 col-6 内的另一个 div 中，并带有一些填充：

 .mycanvas {
   padding: 10px;
 }

 <div class="col-6 bg-white shadow rounded">
  <div class="mycanvas">
    <h3>Col1</h3>
    <canvas id="bar-chart"></canvas>
  </div>
</div>
<div class="col-6 bg-white shadow rounded">
  <div class="mycanvas">
    <h3>Col2</h3>
    <canvas id="bar-chart2"></canvas>
  </div>
</div>

【讨论】：