0
マルチページ・フォームに表示されるタイプのように、CSSとブートストラップを使用して進捗ステップ・トラッカーを作成していて、異なるスクリーン・サイズ。プログレス・ステップ・トラッカーのサイズが縮小されない
私は特定の小さな画面サイズに移動すると、私はさらに移動ステップ間のバーの問題が、その後彼らの手順を左に持っています。私は条件付きで除去され、ビジネスロジックに基づいて、それがアクティブになり、クラスを追加してい
.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;
}
}
}
:
<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>
そして、私のスタイルシート:私の値下げ
この例。私はここでライブデモを建て
を私は理にかなっているし、将来的に物事が容易になりますつまり、前カルク見たことがなかったです。ありがとう。 – loganhuskins