進度跟蹤器不會縮小規模

Question

我正在製作一個進度步跟蹤器，就像您在多頁面表單中看到的類型一樣，使用CSS和Bootstrap，並且我遇到了縮小到不同屏幕尺寸的問題。

當我移動到某個較小的屏幕尺寸，我有移動進一步左那麼他們的步驟，各步驟間酒吧的問題。

我降價：

<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>