相同長度的垂直分隔線（邊框）

我有一個簡單的引導程序網格，其中有row和col-類。我想要得到一個像垂直分隔線一樣的桌子，這個分隔線的全長等於最高的一列。相同長度的垂直分隔線（邊框）

我準備了一個演示，它揭示了使用經典方法的分頻器只與當前列一樣長。 http://www.bootply.com/8egTicqQAq

我用可接受的解決方案查找了不同的其他問題。但其中沒有人爲我工作。至少不在最新版本的Chrome中。但是每個現代瀏覽器都應該使用所要求的解決方案。

2017-02-07 dannyyy

你可以使用Flexbox的？ – makshh

添加display: table到.row和display: table-cell和float: none到.col：

.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

來源

2017-02-07 16:56:31

而不是**'div [class^= col-]'**，您可以使用**'div [class | = col]'**。 –

完美。正是我在找什麼。謝謝 – dannyyy

不客氣; D –

相同長度的垂直分隔線（邊框）

回答

相關問題