是否有更好的方法将列表分成列？

Question

我尝试将我的列表分成 4 列，使用 bootstrap 我使用网格，这样做感觉不合法，有没有更好的方法

这就是我所做的：

<div class="grid">
    <ul class="list-group">
        <div class="row">
            <div class="col">
                <li class="list-group-item">1</li>
                <li class="list-group-item">2</li>
                <li class="list-group-item">3</li>
            </div>

            <div class="col">
                <li class="list-group-item">1</li>
                <li class="list-group-item">2f</li>
                <li class="list-group-item">3</li>
            </div>
            <div class="col">
                <li class="list-group-item">1</li>
                <li class="list-group-item">2</li>
                </div>
            <div class="col">                
                <li class="list-group-item">1</li>
                <li class="list-group-item">2</li>
            </div>
        </div>
    </ul>
</div>

我希望它在不添加任何 div 标签的情况下中断，有办法吗？

Answer 1

您可以使用 CSS

columns

属性来实现此目的：

ul {
  columns: 4;
}

ul {
  columns: 4;
}

<div class="grid">
  <ul class="list-group">
    <li class="list-group-item">1</li>
    <li class="list-group-item">2</li>
    <li class="list-group-item">3</li>
    <li class="list-group-item">1</li>
    <li class="list-group-item">2f</li>
    <li class="list-group-item">3</li>
    <li class="list-group-item">1</li>
    <li class="list-group-item">2</li>             
    <li class="list-group-item">1</li>
    <li class="list-group-item">2</li>
  </ul>
</div>

请注意，列表项之间也不能有 div。