ブートストラップを使って水平ノードブランチを作成する方法は？

Question

ブートストラップでこれをどうすれば作成できますか？

Iは、4列のグリッドレイアウトを使用して、ノードの各々を作る考えていました。しかし、センターノードは、必要以上のスペースを取っています。ここで

それはここでは、この

Answer 1

のように見える今のところbootply http://www.bootply.com/5ni6EJeTWM

である私が思いついたものです。それは完璧ではありませんが、あなたがトラックに乗るのを助けるはずです。

コードを更新しました - 完全に対応しています！

.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>