css - Bootstrap 4 : col-auto but not horizontally aligned

Question

我正在尝试使用 Bootstrap 4 重现类似这样的内容，如果可能的话不使用 jQuery:What I want

我正在使用 PHP foreach 获取值，然后使用 col-auto 创建列。因此，所有列的大小都根据内容进行了调整，但问题是这些列没有水平对齐。 这是我所拥有的:What I have

这是我的代码(由于 PHP 的原因，它无法运行，但希望您能理解):

.title {
    font-size: 0.75rem; /*12px*/
    font-weight: 600;
    color: #1C1B25;
    margin-bottom: 0;
}

.value {
    font-size: 1.5rem;
    font-weight: 500;
    color: #6846C6;
}

<div class="container">
  <div class="row">
  <?php foreach($this->listEquations as $eq) { ?>
    <div class="col-auto">
      <p class="title"><?php echo $eq->name; ?></p>
      <p class="value"><?php echo $eq->value; ?></p>
    </div>
  <?php } ?>
</div>

Answer 1

我认为你应该尝试给出一个固定的宽度而不是使用 col-auto。 固定宽度将水平对齐所有列。因为你想要连续 6 列，所以你可以使用 col-md-2/col-sm-2/col-lg-2

<div class="container">
    <div class="row">
        <?php foreach($this->listEquations as $eq) { ?>
            <div class="col-md-2">
                 <p class="title"><?php echo $eq->name; ?></p>
                 <p class="value"><?php echo $eq->value; ?></p>
            </div>
        <?php } ?>
    </div>
</div>