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>

Bootstrap 4：col-auto，但未水平对齐

1 个答案: