4
（HTML和CSS代碼在帖子底部提供）使自定義組織圖表響應。 CSS，HTML，Bootstrap
我正在製作一個使用Bootstrap 3.0.2的Web應用程序，它幫助我使其大部分響應。
我想添加一個組織結構圖來顯示元素的層次結構，所以我找到了一些使用無序列表的代碼來顯示它。我的問題是，要成爲一名初學者程序員，就是要讓組織結構圖與我的目標一致，使網站在大多數屏幕尺寸上看起來不錯。
正如你從下面的圖片可以看到的，問題是當第二層次的列表項獲得太多的子層（第三層次）時，它變得太寬了，並將其兄弟姐妹推到下一行。 這種方式的邊界（這是使用僞元素::之前和::之後）不會正確顯示。
我懷疑的解決方案可能涉及第三級調各元素（-tag）的大小和向下，一旦屏幕尺寸變得太小。問題是我不知道只瞄準第三級標籤，因爲我想要頂級元素保持相同的大小。也只是想要一般的提示/建議，我可以嘗試。我願意將其全部更改，或者將任何已有的響應組織圖免費用於商業用途。也許甚至有解決方案，我可以將 som bootstrap元素合併到組織結構圖中以滿足我的要求？
欣賞任何時間和精力。即使只是一些提示將我推向正確的方向也會有很大的幫助！
HTML代碼：
<!--
ORG CHART
=========================================-->
<div class="container-fluid" style="margin-top:20px">
<div class="row">
<div class="col-md-12">
<div class="tree">
<ul>
<li>
<a href="#">
<div class="container-fluid">
<div class="row">
Top level
</div>
<div class="row" style="margin-top: 35px;">
<i class="fa fa-exclamation-circle fa-2x"></i>
</div>
<div class="row">
15 Failed Tests
</div>
</div>
</a>
<ul>
<li>
<a href="#">
<div class="container-fluid">
<div class="row">
Customer
</div>
<div class="row" style="margin-top: 35px;">
<i class="fa fa-exclamation-circle fa-2x"></i>
</div>
<div class="row">
3 Failed Tests
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="container-fluid">
<div class="row">
Payments
</div>
<div class="row" style="margin-top: 35px;">
<i class="fa fa-exclamation-circle fa-2x"></i>
</div>
<div class="row">
5 Failed Tests
</div>
</div>
</a>
<ul>
<li>
<a href="#">
<div class="container-fluid">
<div class="row">
Send Money
</div>
<div class="row" style="margin-top: 35px;">
<i class="fa fa-exclamation-circle fa-2x"></i>
</div>
<div class="row">
3 Failed Tests
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="container-fluid">
<div class="row">
Send Request
</div>
<div class="row" style="margin-top: 35px;">
<i class="fa fa-exclamation-circle fa-2x"></i>
</div>
<div class="row">
2 Failed Tests
</div>
</div>
</a>
</li>
</ul>
</li>
<li>
<a href="#">
<div class="container-fluid">
<div class="row">
Online
</div>
<div class="row" style="margin-top: 35px;">
<i class="fa fa-exclamation-circle fa-inv fa-2x"></i>
</div>
<div class="row">
7 Failed Tests
</div>
</div>
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
CSS樣式：
/*#region Organizational Chart*/
.tree * {
margin: 0; padding: 0;
}
.tree ul {
padding-top: 20px; position: relative;
-transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}
.tree li {
float: left; text-align: center;
list-style-type: none;
position: relative;
padding: 20px 5px 0 5px;
-transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}
/*We will use ::before and ::after to draw the connectors*/
.tree li::before, .tree li::after{
content: '';
position: absolute; top: 0; right: 50%;
border-top: 2px solid #696969;
width: 50%; height: 20px;
}
.tree li::after{
right: auto; left: 50%;
border-left: 2px solid #696969;
}
/*We need to remove left-right connectors from elements without
any siblings*/
.tree li:only-child::after, .tree li:only-child::before {
display: none;
}
/*Remove space from the top of single children*/
.tree li:only-child{ padding-top: 0;}
/*Remove left connector from first child and
right connector from last child*/
.tree li:first-child::before, .tree li:last-child::after{
border: 0 none;
}
/*Adding back the vertical connector to the last nodes*/
.tree li:last-child::before{
border-right: 2px solid #696969;
border-radius: 0 5px 0 0;
-webkit-border-radius: 0 5px 0 0;
-moz-border-radius: 0 5px 0 0;
}
.tree li:first-child::after{
border-radius: 5px 0 0 0;
-webkit-border-radius: 5px 0 0 0;
-moz-border-radius: 5px 0 0 0;
}
/*Time to add downward connectors from parents*/
.tree ul ul::before{
content: '';
position: absolute; top: 0; left: 50%;
border-left: 2px solid #696969;
width: 0; height: 20px;
}
.tree li a{
height: 100px;
width: 200px;
padding: 5px 10px;
text-decoration: none;
background-color: white;
color: #8b8b8b;
font-family: arial, verdana, tahoma;
font-size: 11px;
display: inline-block;
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
-transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}
/*Time for some hover effects*/
/*We will apply the hover effect the the lineage of the element also*/
.tree li a:hover, .tree li a:hover+ul li a {
background: #cbcbcb; color: #000;
}
/*Connector styles on hover*/
.tree li a:hover+ul li::after,
.tree li a:hover+ul li::before,
.tree li a:hover+ul::before,
.tree li a:hover+ul ul::before{
border-color: #94a0b4;
}
/*#endregion*/
快速的想法：你有沒有嘗試％工作盒子的寬度是多少？ – Rvervuurt 2014-10-06 09:01:58
我有點嘗試過，但問題是每個級別都會包含不同數量的列表項目，這也會改變客戶端。也許我可以計算每個級別的所有項目，然後爲寬度設置一些百分比。 – jonasjuss 2014-10-06 09:09:54
但是列表項添加高度，而不是寬度？如果你害怕長文本會縮小寬度，你總是可以嘗試一個jQuery插件，使文本適應div的寬度（而不是div與文本的寬度）：http://fittextjs.com/ – Rvervuurt 2014-10-06 10:14:37