마법사 응답 문제

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

: 나는 부트 스트랩을 사용하고.

Answer 1

node.wrapper 요소의 너비를 해상도 너비의 1/5로 설정할 수 있습니다. 내가 더 위로를 투표 할 수 있었으면 좋겠어

.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