使用bootstrap list-group-item的treeview的css边框样式

Question

我使用treeview风格bootstrap。这是我自己写的..但我的风格有问题..我使用list-group类ul元素和list-group-item元素li元素，但我的树看起来如下..如何解决子节点和整体的边界问题？

updated fiddle

应该是这样的

Answer 1

这个怎么样？

body{padding: 1em;}


.list-group-item ul{
  margin-top: 10px;
  margin-right: -15px;
  margin-bottom: -10px;
}
.list-group-item li{
  padding: 10px 15px 10px 3em;
  border-top: 1px solid #ddd;
}
.list-group-item li:before{
  content: '';
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  margin-top: -11px;
  background: #ddd;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css">


<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">
    Dapibus ac facilisis in
    <ul class="list-unstyled">
      <li>Cras justo odio</li>
      <li>Dapibus ac facilisis in</li>
      <li>
        Morbi leo risus
        <ul class="list-unstyled">
          <li>Cras justo odio</li>
          <li>Dapibus ac facilisis in Dapibus ac facilisis inDapibus ac facilisis inDapibus ac facilisis inDapibus ac facilisis inDapibus ac facilisis inDapibus ac facilisis inDapibus ac facilisis inDapibus ac facilisis in</li>
          <li>Morbi leo risus</li>
          <li>Porta ac consectetur ac</li>
          <li>Vestibulum at eros</li>
        </ul>
      </li>
      <li>Porta ac consectetur ac</li>
      <li>Vestibulum at eros</li>
    </ul>
  </li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>


<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Answer 2

使用引导程序或使用

创建树视图。 要做到这一点，你将不得不使用html css＆amp; js也是。 这里的参考文献将帮助您实现这一目标。

我发现此链接对您有用

bootstrap tree view

jsfiddel for making awesome treeview

@OneToMany(mappedBy = "tillage", cascade=CascadeType.ALL, fetch = FetchType.EAGER)
private List<Sample> sampleList;

我希望你能学到你想要的东西。