html - 向导响应问题

Question

我正在创建以下向导。

我试过跟随;但它不能正常工作。调整窗口大小时，其布局会受到干扰。它应该是响应式的。什么是实现它的最佳方法，以便无论分辨率如何，它都应该保持 Responsive。

Fiddle with issue

HTML:

<div class="col-md-10">
    <div class="wizard-wrapper">
        <div class="node-wrapper text-center wactive">
            <div class="node"><span>1</span>

            </div>
            <label class="lbl-wizard">Singn Up</label>
        </div>
        <div class="node-wrapper text-center">
            <div class="node"><span>2</span>

            </div>
            <label class="lbl-wizard">Order Info</label>
        </div>
        <div class="node-wrapper text-center">
            <div class="node"><span>3</span>

            </div>
            <label class="lbl-wizard">Preview Info</label>
        </div>
        <div class="node-wrapper text-center">
            <div class="node"><span>4</span>

            </div>
            <label class="lbl-wizard">Payment Method</label>
        </div>
        <div class="node-wrapper text-center">
            <div class="node"><span>5</span>

            </div>
            <label class="lbl-wizard">Complete Order Info</label>
        </div>
        <div class="connection"></div>
    </div>
</div>

CSS

/* wizard */
.wizard h2 {
    margin-top: 5px;
}

.node {
    background: #2d2f32;
    border-radius: 30px;
    color: #fff;
    display: inline-block;
    height: 37px;
    text-align: center;
    width: 37px;
    border: 4px solid #C2C6C9;
}

.wactive .node {
    background: #AA0405;
}
.node > span {
    display: inline-block;
    font-size: 14px;
    padding-top: 4px;
    font-family: open_sansbold;
}

.lbl-wizard {
    display: block;
    font-family: open_sansregular;
    font-size: 14px;
    color: #2d2f32;
    padding-top: 5px;
}

.node-wrapper.text-center {
    float: left;
    padding: 0 5%;
    position: relative;
    z-index: 1;
}

.connection {
    background: #c2c6c9;
    display: inline-block;
    height: 5px;
    margin-top: -113px;
    padding-top: 7px;
    position: relative;
    vertical-align: middle;
    width: 100%;
    z-index: 0;
}

仅供引用:我正在使用 Bootstrap 。

Answer 1

您可以将 node.wrapper 元素的宽度设置为分辨率宽度的五分之一。

width: calc(100% / 5);

此外，您应该更改 .connection 使其保持在一个位置:

.connection {
    background: #c2c6c9;
    display: block; (new)
    height: 5px;
    margin-top: 38px; (new)
    padding-top: 7px;
    position: absolute; (new)
    vertical-align: middle;
    width: 100%;
    z-index: 0;
}

Fiddle