Question

我正在使用Bootstrap 3并且已经考虑了这个问题几天了。最简单的方法是为左列设置border-right或为右列设置border-left，并使用一些填充来模拟垂直分隔线。这种解决方案的问题在于它不是智能的，因此它的高度始终是1列的高度，具体取决于CSS中是否使用了border-right或border-left。

我做了一些研究并发现了这个：http://codepen.io/philhoyt/pen/ockht

它非常接近我希望实现的目标，但我需要一些帮助，将.vertical-divider改进我的Bootstrap 3 CSS框架并使其响应。

这是我现在的HTML：

<section class="container-fluid">
        <div class="row">
            <div class="col-md-8">
                <h4>Left column title</h4>
                <p>Left column text</p>
            </div>
            <div class="col-md-4">
                <h4>Right column title</h4>
                <p>Right column text, which may be longer or shorter than the left column</p>
            </div>
        </div>
</section>

任何人都知道如何做到这一点？谢谢！

Answer 1

感谢所有评论。在尝试了几种不同的方法之后。在其他方面，为了满足我的所有需求（如下所列），我不得不求助于Flexbox方法，它很好地解决了我原来的问题。再次感谢！

希望这些信息对每个人都有帮助！

回顾我的需求：

Bootstrap 3作为主干CSS框架
需要2个Bootstrap响应列之间的垂直分隔符
垂直分隔线的高度需要匹配较长列的高度（可能是左列或右列）
当Bootstrap响应列成为移动的单列

最终解决方案：

HTML：

<section class="container-fluid">
    <div class="row row-flex">
        <div class="col-md-8 col-flex-item vertical-divider">
            <h4>Left column title</h4>
            <p>Left column text</p>
        </div>
        <div class="col-md-4 col-flex-item">
            <h4>Right column title</h4>
            <p>Right column text, which may be longer or shorter than the left column</p>
        </div>
    </div>
</section>

CSS：

.row-flex {
display: flex;
flex-flow: row wrap;
}
.col-flex-item {
display: flex;
flex-flow: column;
}
.vertical-divider {
border-right: 1px solid black;
}

2列之间的CSS垂直分隔符，它将匹配较长列的高度

1 个答案: