responsive-design - 使用 Bootstrap3 的响应式时间线 UI

Question

如何创建一个带有垂直时间线栏的用户界面，在桌面上它显示为中间的时间线栏和两侧的事件框。在较小的移动屏幕上，时间轴栏位于左侧，所有事件框位于右侧。

将 JQuery 与响应式类结合使用是可以的，只需要显示所有事件框，因此使用 xs-hidden 隐藏备用框是行不通的。

JS fiddle : http://jsfiddle.net/n82ek/2/

缩小结果窗口的展开大小以查看响应行为。

需要发生什么？向左移动栏以显示 xs很高兴有:还可以在框旁边添加时间线点。

请参阅随附的示例时间线 ui 模式图像......谢谢!

当前 HTML:

<div class="container">
    <div class="timelineBar"></div>
    <div class="timelineDot"></div>
    <div class="row">
        <div class="col-sm-6">
        </div>
        <div class="col-sm-6">
            <div class="shadowBox">right</div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6">
            <div class="shadowBox">left</div>
        </div>
        <div class="col-sm-6">
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6">
        </div>
        <div class="col-sm-6">
            <div class="shadowBox">right</div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6">
            <div class="shadowBox">left</div>
        </div>
        <div class="col-sm-6">
        </div>
    </div>
</div>

当前 CSS:

@import url('https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css');
.timelineBar {
    width: 2px;
    background-color: #BDBDBD;
    display: inline-block;
    position: absolute;
    height: 100%;
    left: 50%;
    margin-left: 10px;
    margin-right: 10px;
}
.shadowBox {
    box-shadow: rgba(0, 0, 0, 0.796875) 0px 0px 2px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.796875) 0px 0px 2px;
    border:2px solid white;
    border-radius: 10px;
    margin: 10px;
    background-color: #FFFFFF;
}
.timelineDot{
    width: 10px;
    height: 10px;
    background-color: #BDBDBD;
    opacity: 1;
    display: inline-block;
    position: absolute;
    left: 50%;
    top: 15px;
    margin-left: 6px;
    border-radius: 10px;
}

Answer 1

“时间轴(响应式)”片段:

这看起来非常非常接近您的示例所显示的内容。下面链接的 Bootstrap 片段涵盖了您正在寻找的所有基础。我自己一直在考虑，与您有相同的要求(尤其是响应能力)。这在屏幕尺寸和设备之间变化得很好。

您可以 fork 它并将其用作实现您的特定期望的一个很好的起点:

• http://bootsnipp.com/snippets/featured/timeline-responsive

<小时/>

这是我为您拍摄的两张屏幕截图......宽而薄: