HTML Bootstrap - 类似时间轴

Question

我是 HTML/CSS 和 Bootstrap 的新手，但我正在构建一个简单的网站，其中我有三个面板，一个在另一个面板下面，它们之间相隔几个像素。

<div class="panel panel-default" style="width:800px; margin:0 auto;" id="panel5">
...
</div>
<connector_would_go_here>
<div class="panel panel-default" style="width:800px; margin:0 auto;" id="panel5">
...
</div>

我想让用户感觉所有这三个面板都是相连的，类似于时间线。然而与创建“脊柱”并链接所有内容的时间线不同，我希望它们从中间底部连接到中间顶部。那可能吗？如果是，怎么办？

Answer 1

演示:http://jsfiddle.net/w46p6zt2/1/

连接器可以是任何元素，例如具有特殊类别的 div。然后尝试这种风格:

.connector {
    display: block;
    background: #DDD;
    width: 2px;
    height: 10px;
    margin: 0 auto;
}

边距使元素居中，显示为颜色为 #DDD 的 2x10 矩形。随意调整。不过，请务必消除面板上的边距。