Bootstrap 将列表元素包装成 3 行

Question

我想使用一个<ul>将列表元素包装到 3 列中

只是为了澄清我想要什么：

<ul class="list-group list-group-flush row-cols-3">
    <li class="list-group-item">Lorem Ipsum</li>
    <li class="list-group-item">Lorem Ipsum</li>
    <li class="list-group-item">Lorem Ipsum</li>
    <li class="list-group-item">Lorem Ipsum</li>
</ul>

我尝试使用row-cols-3但它不起作用。

这是它现在的样子：

更新

#1

#2

#3

Answer 1

这是一个解决方案，感谢https://getbootstrap.com/docs/5.0/components/list-group/#horizo ntal 和@fabio.sang 在How to specify an element which to wrap in css flexbox? 上的评论？ . 为测试目的添加了更多li项目。

 li { flex-basis: 33%; }

 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" /> <ul class="list-group list-group-horizontal flex-wrap"> <li class="list-group-item">Lorem Ipsum</li> <li class="list-group-item">Lorem Ipsum</li> <li class="list-group-item">Lorem Ipsum</li> <li class="list-group-item">Lorem Ipsum</li> <li class="list-group-item">An item</li> <li class="list-group-item">A second item</li> <li class="list-group-item">A third item</li> <li class="list-group-item">An item</li> <li class="list-group-item">A second item</li> <li class="list-group-item">A third item</li> </ul>

Answer 2

这样边框和行列就完美了。

<ul class="list-group list-group-horizontal row">
  <li class="list-group-item col-4 border-0 border-bottom">Lorem Ipsum</li>
  <li class="list-group-item col-4 border-0 border-bottom">Lorem Ipsum</li>
  <li class="list-group-item col-4 border-0 border-bottom">Lorem Ipsum</li>
  <li class="list-group-item col-4 border-0 border-bottom">Lorem Ipsum</li>
  <li class="list-group-item col-4 border-0 border-bottom">Lorem Ipsum</li>
  <li class="list-group-item col-4 border-0 border-bottom">Lorem Ipsum</li>
  <li class="list-group-item col-4 border-0 border-bottom">Lorem Ipsum</li>
  <li class="list-group-item col-4 border-0 border-bottom">Lorem Ipsum</li>
</ul>