[2列列表以其标题分隔

Question

我试图将h2及其列表项一起获取，但是每次列表计数变化时，标题似乎都出现在单独的列中，而其在其他列中的列表则有任何方式可以将标题与它的标题卡在一起清单？下面是我的代码，

ul li {
  list-style-type: none;
}

.list-parent ul li a {
  color: #428bca;
}

ul.list-parent {
  columns: 2
}

.list-parent h2 {
  margin: 15px 0;
}

<h2 class="heading">Main Heading</h2>
<div class="row">
  <div class="col-sm-12">
    <ul class="list-parent">
      <li>
        <h2>Sub Heading</h2>

        <ul class="sub-list-parent">
          <li>
            <a href="">List items</a>
          </li>
        </ul>
      </li>
      <li>
        <h2>Sub Heading</h2>

        <ul class="sub-list-parent">
          <li>
            <a href="">List items</a>
          </li>
        </ul>
      </li>
      <li>
        <h2>Sub Heading</h2>

        <ul class="sub-list-parent">
          <li>
            <a href="">List items</a>
          </li>
          <li>
            <a href="">List items</a>
          </li>
        </ul>
      </li>
      <li>
        <h2>Sub Heading</h2>

        <ul class="sub-list-parent">
          <li>
            <a href="">List items</a>
          </li>
          <li>
            <a href="">List items</a>
          </li>
          <li>
            <a href="">List items</a>
          </li>
          <li>
            <a href="">List items</a>
          </li>
        </ul>
      </li>
      <li>
        <h2>Sub Heading</h2>

        <ul class="sub-list-parent">
          <li>
            <a href="">List items</a>
          </li>
          <li>
            <a href="">List items</a>
          </li>
        </ul>
      </li>
      <li>
        <h2>Sub Heading</h2>

        <ul class="sub-list-parent">
          <li>
            <a href="">List items</a>
          </li>
          <li>
            <a href="">List items</a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>

我也尝试过用div代替li的父母，但由于ul之后的孩子ul没有唯一的孩子，所以在div之后的垂直间隙不均匀！！是否有任何动态的解决方法？（即，即使子li计数变化，标头也应始终坚持其兄弟姐妹ul）

Answer 1

如果我正确理解了您的问题，则需要将h2与ul放在同一div中