小编jon*_*uss的帖子

（文章底部提供了HTML和CSS代码）

我正在使用Bootstrap 3.0.2制作Web应用程序，这可以帮助我使大多数应用程序具有响应能力。

我想添加一个组织结构图，以显示元素的层次结构，所以我找到了一些使用无序列表来显示此代码的代码。但是，成为一名初学者程序员，我的问题是使组织结构图与我的目标一致，即使网站在大多数屏幕尺寸下都看起来不错。

从下图可以看到，问题在于，当第二级的列表项有太多的子级（第三级）时，它变得太宽并将其兄弟姐妹向下推到下一行。这样，边框（使用伪元素:: before和:: after制作的）将无法正确显示。

我怀疑解决方案可能涉及到一旦屏幕尺寸变得太小，就要在第3层上下调整每个元素（-标签）的尺寸。问题是我不知道只针对3级标签，因为我希望顶层元素保持相同的大小。也只想了解我可以尝试的一般技巧/建议。我愿意将其全部更改，或免费使用任何已经存在的响应式组织结构图进行商业使用。甚至有一种解决方案，我可以将som引导程序元素合并到组织结构图中以满足我的要求？

感谢您的时间和精力。即使只是一些提示，以正确的方向推动我也会大有帮助！

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> …