我正在创建以下向导。
我试过以下;但它没有按预期工作。在调整窗口大小时,它的布局会受到干扰。它应该是响应。什么是实现它的最佳方式,以便尽管有任何分辨率,它仍应保持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;
}
仅供参考:我正在使用bootstrap。
答案 0 :(得分: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;
}