我正在创建以下向导。
我试过跟随;但它不能正常工作。调整窗口大小时,其布局会受到干扰。它应该是响应式的。什么是实现它的最佳方法,以便无论分辨率如何,它都应该保持 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 。
最佳答案
您可以将 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;
}
关于html - 向导响应问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27408356/