css - Bootstrap 行之间的边框高度相同

Question

我需要有 3 个 bootstrap 列，每列之间有一个边框，但我的问题是我不能使它们具有相同的高度。

这是我的 CSS 代码...

div .column-lines div:first-child {
    border-right: 1px solid #a6b7bf;
    padding-right: 30px;
}

div .column-lines div:last-child {
    padding-left: 30px;
}

div .column-lines div:not(:first-child):not(:last-child) {
    border-right: 1px solid #a6b7bf;
    padding-right: 30px;
    padding-left: 30px;
}

Fiddle

结果:

这是我希望的样子:

如何使边框高度相同(最高列的高度)？

我不想使用表格 - 如果可能的话。

谢谢

Answer 1

你可以试试像这样的 CSS:

.div{
    display: table;
}

div .column-lines {
    vertical-align: top;
    display: table-cell;
    float: none;
    border-right: 1px solid #a6b7bf;
}