html - 如何在响应式网站上绘图

Question

我正在尝试创建我希望使用 Bootstrap 3.0.3 的基本响应式网站。我正在制作一条时间线，它垂直向下，当窗口很大时它在时间线的两边都有图标，否则图标会排成一行，时间线标记会缩小。像这样:大时:

当小的时候:

目前图标和文字表现正常，但我必须画线来说明我的观点。实际上我有|和 - 代表线条，它们会随着调整大小而出现和消失。我的问题是，我怎样才能画出时间线的实际线条，以便它们正确运行。我可以在网格元素中绘制一些矢量或形状图，还是只需要在其他地方绘制线条并将其作为背景图像引入并通过调整窗口大小来更改？

当前代码:

<div class="row">
    <h5>WEEK 1</h5>  
</div>
<div class ="row">
    <div class = "col-xs-12 col-sm-2">                
        <a href="#" class="btn btn-default" rel="popover" data-content="output" data-placement="right" data-trigger="click"><img src="Doc_icon.jpg"></a>
        <p><a href="#" class="btn btn-default" rel="popover" data-content="output" data-placement="right" data-trigger="click"><img src="Drawing_icon.jpg"></a></p>
    </div>
    <div class = "col-sm-1">
        <h3 class="hidden-xs">||</h3>
    </div>
    <div class = "col-xs-6 col-sm-6">
        <div class="panel panel-info">
            <div class="panel-heading">
                <h3 class="panel-title">This weeks project tittle</h3>
            </div>
            <div class="panel-body">
                <p>Project description: ba nananananana nananananana nananananana nananana nana batman!</p>
            </div>
        </div>
    </div>            
    <div class = "col-xs-1 col-sm-3">
    </div>
    </div>
    <div class = "row">
        <h3 class="hidden-sm hidden-md hidden-lg">---</h3>
        <h3 class="hidden-xs">===</h3>
    </div> 

Answer 1

以我有限的经验，我会坚持使用 Bootstrap 框架和响应式行来获得您需要的设计。我在下面做了一个快速的 jfiddle 和一个基本的工作

JSFiddle of Timeline

基本步骤是-

1. 使用以下代码将 border-top-bottom css 类添加到行

   .border-top-bottom{border-top:2px 纯红色;border-bottom:2px 纯红色;}

2. 将 border-right CSS 类添加到左列

   .border-right{
右边框:2px 纯红色；
填充:10px
}

3. 从 rows 和 panel-info 中移除边距填充

   .panel-info{margin-bottom:-1px;}

   .row{padding:0px;}

4. 然后您可以从那里调整填充和外观。

希望这对您有所帮助。我不是 CSS 专家，所以我确信那里有更有用的答案，但这就是我要开始的方式

干杯