我怎樣才能使這個進度條移動和桌面回應

我有一個包含三個階段（開始、選擇、結果）的進度條。一旦達到一個階段，進度圈就會變成黑色以表示，尚未達到的階段是透明的，圓圈有黑色邊框。我面臨的問題是連接三個進度條圓圈的線沒有回應。在某些設備上，這條線沒有按應有的方式觸及圓圈，而在其他設備上，這條線越過我也不想要的圓圈。對于使此進度條跨設備回應的任何幫助，我將不勝感激，謝謝！

https://jsfiddle.net/6p9kmte8/

HTML

<!-- bootstrap -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="d-flex justify-content-center">
  <div class="progress-container">
    <ul class="progress-steps">
      <li class="active">Begin</li>
      <li class="active">Select</li>
      <li>Results</li>
    </ul>
  </div>
</div>

<!-- jquery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj 3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous">
</script>

CSS

.progress_bar>div {
    display: inline-block;
}

.progress-container {
    width: 71.3%;
    /*margin-top: 9.39%;*/
    margin-bottom: 1%;
    font-weight: 300;
    margin-right: 2em;
    position: fixed;
    bottom: 0;
}

.progress-steps {
    counter-reset: step;
}

.progress-steps li {
    list-style-type: none;
    width: 33.333333%;
    float: left;
    font-size: 1.2em;
    position: relative;
    text-align: center;
    color: black;
}

.progress-steps li:before {
    width: 2.5em;
    height: 2.5em;
    content: counter(step);
    counter-increment: step;
    line-height: 2.5em;
    border: 2px solid black;
    display: block;
    text-align: center;
    margin: 0 auto .7em auto;
    border-radius: 50%;
    background-color: black;
}

.progress-steps li:after {
    width: 100%;
    height: 0.2em;
    content: '';
    position: absolute;
    background-color: black;
    top: 1.2em;
    left: -50%;
    z-index: -1;
}

.progress-steps li:first-child:after {
    content: none;
}

.progress-steps li.active {
    color: black;
}

.progress-steps li.active:before {
    border-color: black;
}

.progress-steps li.active li:after {
    background-color: black;
    width: 85%;
    margin-left: 7.5%;
}

.progress-steps li.active li:before {
    background-color: transparent;
    border: 2px solid black;
    color: transparent;
}

@media (max-width: 1024px) {
    .progress-container {
        width: 90%;
        /*margin-top: 7.15em;
        padding-bottom: 0.4em;*/
        margin-bottom: 2%;
    }

    .progress-steps li {
        font-size: 0.9em;
    }

    .progress-steps li.active li:after {
        width: 71%;
    }
}

uj5u.com熱心網友回復：

.progress_bar>div {
    display: inline-block;
}

.progress-container {
    width: 71.3%;
    /*margin-top: 9.39%;*/
    margin-bottom: 1%;
    font-weight: 300;
    margin-right: 2em;
    position: fixed;
    bottom: 0;
}

.progress-steps {
    counter-reset: step;
}

.progress-steps li {
    list-style-type: none;
    width: 33.333333%;
    float: left;
    font-size: 1.2em;
    position: relative;
    text-align: center;
    color: black;
}

.progress-steps li:before {
    width: 2.5em;
    height: 2.5em;
    content: counter(step);
    counter-increment: step;
    line-height: 2.5em;
    border: 2px solid black;
    display: block;
    text-align: center;
    margin: 0 auto .7em auto;
    border-radius: 50%;
    background-color: black;
}

.progress-steps li:after {
    width: calc(100% - 2.5em);
    height: 0.2em;
    content: "";
    position: absolute;
    background-color: black;
    top: 1.25em;
    right: calc(50%   1.25em);
    z-index: -1;
}

.progress-steps li:first-child:after {
    content: none;
}

.progress-steps li.active {
    color: black;
}

.progress-steps li.active:before {
    border-color: black;
}

.progress-steps li.active li:before {
    background-color: transparent;
    border: 2px solid black;
    color: transparent;
}

@media (max-width: 1024px) {
    .progress-container {
        width: 90%;
        /*margin-top: 7.15em;
        padding-bottom: 0.4em;*/
        margin-bottom: 2%;
    }

    .progress-steps li {
        font-size: 0.9em;
    }
}

標籤：html css 推特引导 进度条 反应灵敏

上一篇：為什么Bootstrap5導航欄不折疊？

下一篇：jQuery更改在bootstrap5選項卡中不起作用