工藝步驟（嚮導）

Question

想要達到的工藝步驟嚮導非常喜歡這一個 - Process Steps in Horizontal Format

但在一個垂直格式！有人可以幫助進行CSS修改，使這個垂直堆疊像左邊的側邊欄。或者建議一些插件來實現相同。

Answer 1

我修改了CSS我希望你能想到像這樣的東西。你可以看到工作示例here。

body { 
    margin: 40px; 
} 

.stepwizard-step p { 
    margin-top: 10px; 
    display: inline-block; 
} 

.stepwizard-row { 
    display: table-row; 
} 

.stepwizard { 
    display: table; 
    width: 20%; 
    position: relative; 
} 

.stepwizard-step button[disabled] { 
    opacity: 1 !important; 
    filter: alpha(opacity=100) !important; 
} 

.stepwizard-row:before { 
    left: 14px; 
    bottom: 0; 
    position: absolute; 
    content: " "; 
    width: 1px; 
    height: 100%; 
    background-color: #ccc; 
    z-order: 0; 
} 

.stepwizard-step { 
    display: block; 
    position: relative; 
} 

.btn-circle { 
    width: 30px; 
    height: 30px; 
    text-align: center; 
    padding: 6px 0; 
    font-size: 12px; 
    line-height: 1.428571429; 
    border-radius: 15px; 
}