我有下面的HTML:

.row.justify-content-center div:last-child>div>div {
  display: none;
}

.line {
  width: 100%;
  height: 9px;
  margin-left: 16px;
  border-bottom: 2px solid lightgrey;
  position: absolute;
}

.circle {
  height: 16px;
  width: 16px;
  background-color: lightgrey;
  border-radius: 50%;
  display: inline-block;
}

<link rel="stylesheet"  integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="align-text-center">
    <div class="row justify-content-center">
        <div class="col-1 text-center">
            <div id="step-1" class="circle">
                <div class="line"></div>
            </div>
            <div class="d-none d-md-block">
                <p class="small">Step 1</p>
            </div>
        </div>
        <div class="col-1 text-center">
            <div id="step-2" class="circle">
                <div class="line"></div>
            </div>
            <div class="d-none d-md-block">
                <p class="small">Step 2</p>
            </div>
        </div>
        <div class="col-1 text-center">
            <div id="step-3" class="circle">
                <div class="line"></div>
            </div>
            <div class="d-none d-md-block">
                <p class="small">Step 3</p>
            </div>
        </div>
    </div>
</div>

該行具有絕對位置，它跟隨相對父元素col-sm-1，而不是circle類元素。移除此絕對位置將使寬度跟隨圓形元素