html - 尝试将 4 个图表 JS 图表置于 div 中心时遇到问题

Question

我有一个页面，其中一个侧面板占据了 25%，页面的 float:left 一侧，还有一个 div 和 float:right 占用其他 75%。在右侧的 div 中，有 4 个 2 x 2 格式的 ChartJS 图表。由于我似乎无法弄清楚的原因，我无法让图表在 div 的中心对齐，或者让它们拉伸(stretch)以使用整个 div，而不仅仅是左边的 70ish %。我尝试了不同的 float 、文本对齐、宽度、填充，但似乎无法正确处理。

<div class="dashboards">
    <div id="chartsId" class="row">
        <div class="col-sm-5">
            <canvas width="200" height="200"></canvas>
        </div>
        <div class="col-sm-5">
            <canvas width="200" height="200"></canvas>
        </div>
        <div class="col-sm-5">
            <canvas width="200" height="200"></canvas>
        </div>
        <div class="col-sm-5">
            <canvas width="200" height="200"></canvas>
        </div>
    </div>
</div>

.dashboards {
    margin: 0;
    border: 1px solid red;
    display: table;
    width: 100%;
    table-layout: fixed;
    text-align: center;
}

Answer 1

好的，如果您使用的是 Bootstrap，那么我认为您的问题出在列数上。

Bootstrap 使用 12 列布局，每行使用 10 列(我说“每行”是因为您有 5*4 = 20 列已解析为两个 10x10 行)。

而是尝试使用两行 row，除非您希望在桌面或其他类似设备上使用单行布局，否则它会起作用。这看起来像:

<div class="row">
  <div class="col-sm-5"><chart /></div>
  <div class="col-sm-5"><chart /></div>
</div>

<div class="row">
  <div class="col-sm-5"><chart /></div>
  <div class="col-sm-5"><chart /></div>
</div>

没关系，但您仍然会遇到偏移问题。你需要解决的是...... offset !您再次面临的问题是，12 列布局中使用了 10 列。像这样，其中 x 是一张图表，y 是另一张图表:

|x|x|x|x|x|y|y|y|y| | |

通过引入 1 列偏移量，您可以像这样将列居中:

| |x|x|x|x|x|y|y|y|y| |

您需要做的就是将 .offset-sm-1 添加到您的列中，如下所示:

<div class="row">
  <div class="col-sm-5 .offset-sm-1"><chart /></div>
  <div class="col-sm-5 .offset-sm-1"><chart /></div>
</div>

<div class="row">
  <div class="col-sm-5 .offset-sm-1"><chart /></div>
  <div class="col-sm-5 .offset-sm-1"><chart /></div>
</div>

你应该有漂亮的居中图表。