使用HTML，CSS和Bootstrap的组织结构图

问题描述

我介绍了在这里找到的组织结构图： https://bootsnipp.com/snippets/eN3Q8

一切正常，但是我的树在水平方向变大了，像这样折断：

我想使用overflow-x属性添加滚动条，但是它不起作用：

.tree ul {
    padding-top: 20px; position: relative;
    overflow-x: scroll;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
}

这是一个CodePen链接：https://codepen.io/vladnicu/pen/zYqwdyv

谢谢！

解决方法

您必须设置一个min-width以避免图表像这样折断：

.tree {
  min-width: 676px;
  overflow-x: scroll;
}

在您的示例中，676px位于其正常工作的最后宽度。这就是为什么我选择它。

现在您可以根据需要水平滚动了