同じ長さの垂直仕切り（ボーダー）

Question

私は、rowとcol-クラスの簡単なブートストラップグリッドを持っています。私は高さの列に等しい全長を持つ垂直仕切りを使って見栄えのようなテーブルを作りたいと思っています。

古典的なアプローチでは、現在の列と同じくらいの長さのデモを作成しました。 http://www.bootply.com/8egTicqQAq

私は受け入れられた解決策で、SOに関するさまざまな質問を探しました。しかし彼らのうちの誰も私のために働いていませんでした。少なくともChromeの最新バージョンではありません。しかし、現代のブラウザはすべて、要求されたソリューションを対象とする必要があります。

Answer 1

は.colに.rowとdisplay: table-cellへdisplay: tableとfloat: noneを追加します。

.row { 
    width: 100%; 
    margin: 2px; 
    border-top: black solid 1px; 
    border-bottom: black solid 1px; 
    border-left: black solid 1px; 
    border-right: black solid 1px; 
    display: table; 
} 

.row > div[class^=col-] { 
    border-right: black solid 1px; 
    float: none; 
    display: table-cell; 
} 

.row > div[class^=col-]:last-child { 
    border:none; 
} 

例：http://www.bootply.com/DNBL5ir8dG