Bootstrap 4: col-auto，但不水平对齐

Question

我正在尝试使用Bootstrap4重现类似的内容，如果可能的话，不使用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。固定宽度将水平对齐所有列。如果您希望一行中有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>