使用Bootstrap3的响应时间轴UI

Question

使用Bootstrap3的响应时间轴UI

Man*_*han 39 timeline responsive-design twitter-bootstrap-3

如何创建具有垂直时间轴栏的UI,在桌面上它显示为中间的时间轴栏和两侧的事件框.在较小的移动屏幕上,左侧的时间轴栏和右侧的所有事件框.

将JQuery与响应类结合使用是可以的,只需要显示所有事件框,因此使用xs-hidden隐藏备用框将不起作用.

JS小提琴: http ://jsfiddle.net/n82ek/2/

减少结果窗口的扩展大小以查看响应行为.

需要做什么？将左侧的栏向左移动显示尼斯:还在框旁边添加timelineDot.

请参阅附带的样本时间线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>

Run Code Online (Sandbox Code Playgroud)

目前的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;
}

Run Code Online (Sandbox Code Playgroud)