html - 进度步跟踪器不会按比例缩小

Question

我正在使用 CSS 和 Bootstrap 制作一个进度步跟踪器，就像您在多页表单中看到的那种类型，我在缩小到不同的屏幕尺寸时遇到了问题。

当我移动到某些较小的屏幕尺寸时，我遇到了步骤之间的条形图向左移动的问题，然后是它们的步骤。

我的 Markdown :

<div class="row">
    <div class="col-xs-6 col-xs-offset-3 col-sm-6 col-sm-offset-3 col-md-6 col-md-offset-3 col-lg-6 col-ls-offset-3">
        <div class="work-order-progress">
           <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 text-center first-item">
                <span class="step-number">1</span>
                <span class="step-name">Initial Approval</span>
            </div>
            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 text-center">
                <span class="step-number">2</span>
                <span class="step-name">Work In Progress</span>
            </div>
            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 text-center">
                <span class="step-number">3</span>
                <span class="step-name">Final Approval</span>
            </div>
            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 text-center">
                <span class="step-number">4</span>
                <span class="step-name">Complete</span>
            </div>
        </div>
    </div>
</div>

还有我的样式表:

.work-order-progress {

.div {
    margin-right: 75px;
    vertical-align: top;
    display: inline-block;
    text-align: center;
    font-weight: bold;
}

.step-number {
    border-radius: 0.8em;
    -moz-border-radius: 0.8em;
    -webkit-border-radius: 0.8em;
    display: inline-block;
    line-height: 1.6em;
    margin-right: 5px;
    text-align: center;
    width: 1.6em; 
}

:not(.first-item) {
    .step-number:before {
        width: 85%;
        height: 5px;
        content: '';
        position: absolute;
        top: 10px;
        left: -87px;
        z-index: -1;
        border-radius: 25px
    }
}

.step-name {
    display: block;
    color: #a5a5a5;
    font-weight: bold;
}

.fill {
    .step-number {
        color: #ffffff;
        background: #22a925;
    }
    .step-number:before {
        background-color: #22a925;
    }
}

:not(.fill) {
    .step-number {
        color: #a5a5a5;
        background: #ededed;
        border: 1px solid;
    }
    .step-number:before {
        background-color: #ededed;
    }
}
}

我根据业务逻辑有条件地添加使其处于事件状态的类，该类在此示例中被删除。

Answer 1

我在这里做了一个现场演示:

.work-order-progress .div {
  margin-right: 75px;
  vertical-align: top;
  display: inline-block;
  text-align: center;
  font-weight: bold;
}
.work-order-progress>div{

}

.work-order-progress .step-number {
  border-radius: 0.8em;
  -moz-border-radius: 0.8em;
  -webkit-border-radius: 0.8em;
  display: inline-block;
  line-height: 1.6em;
  margin-right: 5px;
  text-align: center;
  width: 1.6em;
}
.work-order-progress :not(.first-item) .step-number:before {
  width: calc(100% - 35px);
  height: 5px;
  content: '';
  position: absolute;
  top: 10px;
  left: calc(-50% + 15px);
  z-index: -1;
  border-radius: 25px;
}
.work-order-progress .step-name {
  display: block;
  color: #a5a5a5;
  font-weight: bold;
}
.work-order-progress .fill .step-number {
  color: #ffffff;
  background: #22a925;
}
.work-order-progress .fill .step-number:before {
  background-color: #22a925;
}
.work-order-progress :not(.fill) .step-number {
  color: #a5a5a5;
  background: #ededed;
  border: 1px solid;
}
.work-order-progress :not(.fill) .step-number:before {
  background-color: #ededed;
}

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="row">
    <div class="col-xs-6 col-xs-offset-3 col-sm-6 col-sm-offset-3 col-md-6 col-md-offset-3 col-lg-6 col-ls-offset-3">
        <div class="work-order-progress">
           <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 text-center first-item">
                <span class="step-number">1</span>
                <span class="step-name">Initial Approval</span>
            </div>
            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 text-center">
                <span class="step-number">2</span>
                <span class="step-name">Work In Progress</span>
            </div>
            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 text-center">
                <span class="step-number">3</span>
                <span class="step-name">Final Approval</span>
            </div>
            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 text-center">
                <span class="step-number">4</span>
                <span class="step-name">Complete</span>
            </div>
        </div>
    </div>
</div>