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;
}

边距使元素居中，并显示为2x10矩形的颜色#DDD。不管你喜不喜欢调整。不过，请务必杀死面板上的边距。