如何使用bootstrap創建水平節點分支？

Question

如何在bootstrap中創建這樣的內容？

我想製作4列的使用網格佈局中的節點中的每一個。但是中心節點佔用了更多的空間。

這裏是bootply http://www.bootply.com/5ni6EJeTWM

截至目前，它看起來像這樣

Answer 1

這裏是我想出了。這並不完美，但它應該可以幫助你走上正軌。

更新了代碼 - 完全響應了！

.node-list { 
 
    margin-bottom: 10px; 
 
    overflow: hidden; 
 
    width: 100%; 
 
    padding: 0px; 
 
    margin: 0px; 
 
} 
 

 
.node-list li { 
 
    list-style-type: none; 
 
    color: white; 
 
    text-transform: uppercase; 
 
    font-size: 14px; 
 
    width: 25%; 
 
    float: left; 
 
    position: relative; 
 
    text-align: center; 
 
} 
 

 
.node-list li p { 
 
    color: #000; 
 
    font-weight: bold; 
 
} 
 

 
.node-list li:after { 
 
    content: ''; 
 
    width: 20px; 
 
    height: 20px; 
 
    line-height: 20px; 
 
    display: block; 
 
    font-size: 18px; 
 
    color: #000; 
 
    background: #fff; 
 
    border: 10px solid #000; 
 
    margin: 0 auto 5px auto; 
 
} 
 

 
.node-list li:before { 
 
    content: ''; 
 
    width: 100%; 
 
    height: 6px; 
 
    background: #000; 
 
    position: absolute; 
 
    left: -50%; 
 
    bottom: 20px; 
 
    z-index: -1 
 
} 
 

 
.node-list li:first-child:before { 
 
    content: none; 
 
}

<ul class="node-list"> 
 
    <li class="active"> 
 
    <p>ABC</p> 
 
    </li> 
 
    <li class=""> 
 
    <p>ABC</p> 
 
    </li> 
 
    <li class=""> 
 
    <p>ABC</p> 
 
    </li> 
 
    <li class=""> 
 
    <p>ABC</p> 
 
    </li> 
 
</ul>