如何绘制到响应式网站

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框架和响应行来获得您所需的设计。我已经在下面做了一个基本工作的快速小提示

JSFiddle of Timeline

基本步骤是 -

1. 将border-top-bottom css类添加到包含以下代码的行

   .border-top-bottom{border-top:2px solid red;border-bottom:2px solid red;}

2. 将border-right css类添加到左栏

   .border-right{ border-right:2px solid red; padding:10px }

3. 从rows和panel-info

   中删除边距填充

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

   .row{padding:0px;}

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

希望这会有所帮助。我不是CSS专家，所以我确信有一个更有用的答案，但这就是我开始的方式

干杯