向导响应问题答案

【问题标题】：Wizard reponsiveness issue向导响应问题
【发布时间】：2015-02-09 01:57:03
【问题描述】：

我正在创建以下向导。

我已尝试关注；但它没有按应有的方式工作。调整窗口大小时，其布局会受到干扰。它应该是响应式的。实现它的最佳方法是什么，以便无论分辨率如何，它都应该保持Responsive。

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

仅供参考：我正在使用引导程序。

【问题讨论】：

标签： html css twitter-bootstrap responsive-design media-queries

【解决方案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

【讨论】：