html - 与示例项目相比，我的列太大了

Question

我正在使用 bootstrap 4，并且正在按照教程进行操作。在本教程中，图像下方有 5 列。我正在做与教程完全相同的事情，但我的列看起来要大得多。为什么是这样？我怎样才能让它们更小，类似于教程示例？第一个是样品，第二个是我的样子。

html

.stat-numbers .col-1,
.stat-numbers .col-2 {
  background: rgba(16, 255, 0, 0.15);
  margin-right: 4px;
}

.stat-numbers .col-1.transparent,
.stat-numbers .col-2.transparent {
  background: transparent;
}

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<div class="row stat-numbers">
  <div class="col-2 transparent"></div>
  <div class="col-2">B</div>
  <div class="col-1">
    <div class="icon">D</div>
    <div class="points">18</div>
  </div>
  <div class="col-1 transparent">
  </div>
  <div class="col-2">B</div>
  <div class="col-1">
    <div class="icon">E</div>
    <div class="points">18</div>
  </div>
  <div class="col-1">
    <div class="icon">R</div>
    <div class="points">18</div>
  </div>
  <div class="col-2 transparent"></div>
</div>
...

标签： htmlcssbootstrap-4