相同长度的垂直分隔线（边框）

我有一个简单的引导程序网格，其中有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 –

相同长度的垂直分隔线（边框）

回答

相关问题