通过连接器连接引导板
我有一堆引导板，其中一些是相互关联的。 类似于A组的东西 - ＆gt;图B-＆gt;小组C。
当用户点击面板B时，将显示面板C，当单击面板C时，将显示面板D.我面临的问题是我需要使用一些连接器（水平线/箭头或某些图像）将父面板链接到子面板，我不知道如何操作。
我希望第一列中第一个标题的箭头或连接符连接到第二列，从第二列连接到第三列，依此类推
我的面板结构的结构在小提琴链接中给出。
任何指针都将受到赞赏。
https://jsfiddle.net/vatsalpande/af51yf0s/ 
<div class="container-fluid">
<div class = "row">
<div class="col-lg-2 col-sm-2 col-md-2 col-xs-2"><h5>First Title</h5> </div>
<div class="col-lg-2 col-sm-2 col-md-2 col-xs-2 "><h5>Second</h5></div>
<div class="col-lg-2 col-sm-2 col-md-2 col-xs-2 "><h5>Third</h5></div>
<div class="col-lg-2 col-sm-2 col-md-2 col-xs-2 "><h5>Fourth</h5></div>
<div class="col-lg-2 col-sm-2 col-md-2 col-xs-2 "><h5>Fifth</h5></div>
<div class="col-lg-2 col-sm-2 col-md-2 col-xs-2 "></div>
</div>
<div class = "row">
<div class="col-lg-2 col-sm-2 col-md-2 col-xs-2">
<div class="panel-group">
<div class="panel panel-default" id = " ">
<div class="panel-heading">First Title</div>
<div class="panel-body">
<p> A : 5.8</p>
<p> B : 209M</p>
</div>
</div>
<div class="panel panel-default" id = " ">
<div class="panel-heading">B</div>
<div class="panel-body">
<p> A : 5.8</p>
<p> B : 209M</p>
<p> C : 209M</p>
</div>
</div>
</div>
</div>
<div class="col-lg-2 col-sm-2 col-md-2 col-xs-2 ">
<div class="panel-group">
<div class="panel panel-default" >
<div class="panel-heading">C</div>
<div class="panel-body">
<p> A : 5.8</p>
<p> B : 209M</p>
</div>
</div>
<div class="panel panel-default" >
<div class="panel-heading">P</div>
<div class="panel-body">
<p> A : 5.8</p>
<p> B : 209M</p>
<p> B : 209M</p>
</div>
</div>
<div class="panel panel-default" >
<div class="panel-heading">F</div>
<div class="panel-body">
<p> A : 5.8</p>
<p> B : 209M</p>
<p> C : 209M</p>
</div>
</div>
</div>
</div>
<div class="col-lg-2 col-sm-2 col-md-2 col-xs-2 ">
<div class="panel-group">
<div class="panel panel-default" id = "siteTraffic">
<div class="panel-heading">P </div>
<div class="panel-body">
<p> A : 5.8</p>
<p> B : 209M</p>
</div>
</div>
<div class="panel panel-default" id = " ">
<div class="panel-heading">a</div>
<div class="panel-body">
<p> A : 5.8</p>
<p> B : 209M</p>
<p> C : 209M</p>
</div>
</div>
<div class="panel panel-default" id = " ">
<div class="panel-heading">W</div>
<div class="panel-body">
<p> Q : 5.8</p>
<p> V : 209M</p>
<p> E : 209M</p>
</div>
</div>
<div class="panel panel-default" id = "totalMarketingTraffic">
<div class="panel-heading">W</div>
<div class="panel-body">
<p> Q : 5.8</p>
<p> V : 209M</p>
<p> Q : 209M</p>
</div>
</div>
<div class="panel panel-default" id = " ">
<div class="panel-heading">e</div>
<div class="panel-body">
<p> Q : 5.8</p>
<p> Q : 209M</p>
<p> Q : 209M</p>
</div>
</div>
</div>
</div>
<div class="col-lg-2 col-sm-2 col-md-2 col-xs-2 ">
<div class="panel-group">
<div class="panel panel-default" id = " ">
<div class="panel-heading">Q</div>
<div class="panel-body">
<p> Q : 5.8</p>
<p> Q : 209M</p>
</div>
</div>
<div class="panel panel-default" id = " ">
<div class="panel-heading">w</div>
<div class="panel-body">
<p> w : 5.8</p>
<p> w : 209M</p>
<p> w : 209M</p>
</div>
</div>
<div class="panel panel-default" id = " ">
<div class="panel-heading">w</div>
<div class="panel-body">
<p> w : 5.8</p>
<p> w : 209M</p>
<p> w : 209M</p>
</div>
</div>
<div class="panel panel-default" id = " ">
<div class="panel-heading">P2</div>
<div class="panel-body">
<p> w : 5.8</p>
<p> w : 209M</p>
<p> w : 209M</p>
</div>
</div>
<div class="panel panel-default" id = " ">
<div class="panel-heading">2</div>
<div class="panel-body">
<p> 2 : 5.8</p>
<p> w : 209M</p>
<p> 2 : 209M</p>
</div>
</div>
<div class="panel panel-default" id = " ">
<div class="panel-heading">w</div>
<div class="panel-body">
<p> 2 : 5.8</p>
<p> w : 209M</p>
<p> e : 209M</p>
</div>
</div>
</div>
</div>
<div class="col-lg-2 col-sm-2 col-md-2 col-xs-2 emails">
<div class="panel-group">
<div class="panel panel-default" id = " ">
<div class="panel-heading">eh</div>
<div class="panel-body">
<p> e : 5.8</p>
<p> e : 209M</p>
</div>
</div>
<div class="panel panel-default" id = " ">
<div class="panel-heading">w</div>
<div class="panel-body">
<p> q : 5.8</p>
<p> q : 209M</p>
<p> q : 209M</p>
</div>
</div>
<div class="panel panel-default" id = " ">
<div class="panel-heading">wq</div>
<div class="panel-body">
<p> q : 5.8</p>
<p> q : 209M</p>
<p> q : 209M</p>
</div>
</div>
<div class="panel panel-default" id = " ">
<div class="panel-heading">2l</div>
<div class="panel-body">
<p> w : 5.8</p>
<p> e : 209M</p>
<p> e : 209M</p>
</div>
</div>
<div class="panel panel-default" id = " ">
<div class="panel-heading">2rs</div>
<div class="panel-body">
<p> t : 5.8</p>
<p> t : 209M</p>
<p> t : 209M</p>
</div>
</div>
<div class="panel panel-default" id = " ">
<div class="panel-heading">2</div>
<div class="panel-body">
<p> t : 5.8</p>
<p> t : 209M</p>
<p> t : 209M</p>
</div>
</div>
</div>
</div>
<div class="col-lg-2 col-sm-2 col-md-2 col-xs-2 details">
<div class="panel panel-default">
<div class="panel-heading">2cs</div>
<div class="panel-body">
<div class="col-lg-6 col-sm-6 col-md-6 col-xs-6 emails">
<div class="panel-group">
<div class="panel panel-default" id = "siteTraffic">
<div class="panel-heading">cc/div>
<div class="panel-body">
<p> 2 : 5.8</p>
<p> 2 : 209M</p>
</div>
</div>
<div class="panel panel-default" id = " ">
<div class="panel-heading">ccc</div>
<div class="panel-body">
<p> w : 5.8</p>
<p> w : 209M</p>
<p> w : 209M</p>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-sm-6 col-md-6 col-xs-6 emails">
<div class="panel-group">
<div class="panel panel-default" id = " ">
<div class="panel-heading">tt</div>
<div class="panel-body">
<p> q : 5.8</p>
<p> w : 209M</p>
</div>
</div>
<div class="panel panel-default" id = " ">
<div class="panel-heading">t</div>
<div class="panel-body">
<p> e : 5.8</p>
<p> e : 209M</p>
<p> e : 209M</p>
</div>
</div>
<div class="panel panel-default" id = " ">
<div class="panel-heading">ff</div>
<div class="panel-body">
<p> e : 5.8</p>
<p> e : 209M</p>
<p> e : 209M</p>
</div>
</div>
<div class="panel panel-default" id = " ">
<div class="panel-heading">ggg</div>
<div class="panel-body">
<p> YoY : 5.8</p>
<p> Count : 209M</p>
<p> Share : 209M</p>
</div>
</div>
<div class="panel panel-default" id = " ">
<div class="panel-heading">wq</div>
<div class="panel-body">
<p> e : 5.8</p>
<p> q : 209M</p>
<p> q : 209M</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
1 个答案:
答案 0 :(得分：1)
在面板组上方添加箭头glyphicon并应用CSS样式以进行正确定位。
HTML的一部分：
<div class="col-lg-2 col-sm-2 col-md-2 col-xs-2 emails">
<span class="glyphicon glyphicon-arrow-right right-arrow"></span>
<div class="panel-group">
在你的CSS中：
.right-arrow {
position:absolute;
margin-left: 115px;
margin-top: 10px;
}
工作JS小提琴：Demo here
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？